जावास्क्रिप्ट का उपयोग कर आलसी लोडिंग छवियां कैसे काम करती हैं?

Question

मैं इस बारे में उत्सुक हूं कि आलसी लोडिंग छवियों, छवियों को लोड किया जाएगा जब उन्हें स्क्रॉल किया जाएगा, काम करता है।

कोई संकेत? http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ यहाँ jQuery प्लगइन है:: http://www.appelsiini.net/projects/lazyload

मूल रूप से आप अपने src विशेषता में एक डमी छवि रख दिया और वास्तविक छवि के लिए एक और विशेषता जोड़ने, जे एस की पुस्तक स्थिति का पता लगाता है

Answer 1

यहाँ एक कैसे, प्लग इन का उपयोग है पेज, और छवि के करीब पर्याप्त होने के बाद छवि डेटा लोड करता है। यह वास्तविक छवि के स्रोत के साथ src को प्रतिस्थापित करके करता है। http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

Answer 2

वहाँ आलसी लोड हो रहा है लागू करने के लिए कई तरह से है:

यहाँ एक और व्याख्या दी गई है। प्रक्रिया सिर्फ यह है कि आप जो चाहते हैं उसे लोड करते हैं। आप सॉफ़्टवेयर दृश्य में कुछ भी आलसी लोड कर सकते हैं। वेबसाइटों पर लोड होने पर वेबसाइटों पर इसका अधिकतर उपयोग होता है और ऐसा इसलिए होता है क्योंकि अधिकांश वेबसाइट छवियों को बहुत अधिक है। मेरा मतलब है वेबसाइट की कलाकृति और वास्तविक व्यक्तियों की तस्वीरों में उनके सर्वर पर हजारों छवियां हो सकती हैं। जब आप एक ही समय में उन सभी को आजमाते हैं और लोड करते हैं तो यह आमतौर पर धीमा हो जाता है। कुछ बिंदु पर यह प्रक्रिया को धीमा करना शुरू कर देता है। तो, आलसी लोडिंग आमतौर पर बड़ी वेबसाइटों के लिए किया जाता है। जैसे मैंने कहा कि आप इस कई तरीकों से कर सकते हैं। एक रास्ता पहले से ही दिया गया था। आईएमजी टैग पहले ही लोड हो चुका है लेकिन src part एक डमी फ़ाइल को इंगित करता है जो आकार में छोटा है। ग्राफिक या चित्र वाली छवि का उपयोग न करें ... ग्रे ग्रे ब्लॉक की तरह कुछ उपयोग करें .. या कुछ भी नहीं उपयोग कर सकता है। फिर जब स्क्रॉल भाग स्क्रॉलिंग बिंदु के पास होता है जहां छवियां बंद होती हैं। यह एक फ़ंक्शन चलाएगा जहां यह वास्तविक छवि लिंक के साथ src को प्रतिस्थापित करेगा। एक और तरीका AJAX और स्क्रॉल पॉइंट का उपयोग करना है जब बंद हो जाएगा ... src में छवि के साथ वास्तविक HTML कोड में लोड करें। मैं वास्तव में इसका उपयोग करता हूं। मैं आलसी लोड छवियों, डेटा, पाठ में एक PHP फ़ाइल लिखते हैं।

इस विधि का पूरा बिंदु आवश्यक होने पर वेबसाइट से फ़ाइलों को डाउनलोड करना है। जब कोई छवि लोड हो जाती है तो यह वास्तव में आपके सर्वर से डाउनलोड की जा रही है। इसलिए, डाउनलोडिंग प्रक्रिया के साथ-साथ वास्तविक लोडिंग समय बढ़ सकता है जब आप बड़ी छवि फ़ाइलों से निपटना शुरू करते हैं और उनमें से बहुत से।

Answer 3

आप justlazy, जो jQuery की तरह निर्भरता से स्वतंत्र और बहुत हल्के है का उपयोग कर सकते हैं:

केवल आप की जरूरत कहते हैं:

var placeholders = document.querySelectorAll(".load-if-visible"); 
 
for (var i = 0; i < placeholders.length; ++i) { 
 
    Justlazy.registerLazyLoad(placeholders[i]); 
 
}

प्लेसहोल्डर होना जरूरी निम्नलिखित संरचना:

<span data-src="url/to/image" data-alt="some alt text" 
 
     data-title="some title" class="load-if-visible"> 
 
</span>

एसईओ कारणों के लिए आप किसी अन्य प्लेसहोल्डर (उदा। प्लेसहोल्डर छवि)।

इसके अतिरिक्त एक गाइड है कि इसका उपयोग कैसे करें और छवियों की आलसी लोडिंग के बारे में कुछ सामान्य चीज़ें।

Answer 4

और उदाहरण के लिए आसानी से यह कैसे करें।

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 

"आलसी।jpg "का उपयोग सभी छवियों पर किया जा सकता है, जिसके परिणामस्वरूप वास्तव में केवल एक छवि लोड हो जाएगी (और यह 1x1px छोटी वज़न छवि है)। इसलिए, मान लें कि मेरे पास प्रत्येक के लिए कंपनी लोगो के साथ 250 स्टोर की एक सूची है । इस तरह दिखना किया जा सका:

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg"> 
... 

फिर जादू आता है अपने जावास्क्रिप्ट फ़ाइल में इस रखो:

$('img[src="/images/lazy.jpg"]').each(function(index, el) { 
    $(el).attr('src', $(el).data('real-src')); 
}); 

और wacka-wacka, सभी lazy.jpg छवियों उनके द्वारा प्रतिस्थापित किया जाएगा " वास्तविक "छवियां। आपका एचटीएमएल पेज तेजी से लोड करने का उद्देश्य (क्योंकि उन 250 कंपनियों के पास lazy.jpg में एक ही" लोगो "है :) ... लेकिन जेएस डीओएम फिनिश के बाद सब कुछ ख्याल रखता है डी लोड किया गया।

यह पाठ्यक्रम का एक jQuery समाधान है। शुद्ध जेएस के साथ भी किया जा सकता है।

Answer 5

लेज़ी लोड हो रहा है श्रोता संलग्न घटनाओं स्क्रॉल करने के लिए की या setInterval का उपयोग करके परंपरागत तरीके का उपयोग कर छवियों getBoundingClientRect() की प्रत्येक कॉल के रूप में अत्यधिक गैर performant है पूरे पृष्ठ re-layout करने के लिए ब्राउज़र बलों और काफी Jank को परिचय देंगे आपका वेबसाइट।

उपयोग Lozad.js (सिर्फ 569 कोई निर्भरता के साथ बाइट्स) है, जो performantly आलसी लोड छवियों InteractionObserver उपयोग करता है।