लेज़ी लोडिंग इमेज

Jeremy Wagner
Rachel Andrew

एचटीएमएल में <img> एलिमेंट के तौर पर इनलाइन होने की वजह से, वेबपेज पर इमेज दिख सकती हैं इस्तेमाल न करें. इस पोस्ट में आपको दोनों तरह की इमेज को लेज़ी-लोड करने का तरीका पता चलेगा.

इनलाइन इमेज

<img> एलिमेंट में इस्तेमाल की गई इमेज, लेज़ी लोडिंग के सबसे आम कैंडिडेट होते हैं. इनलाइन इमेज में, लेज़ी लोडिंग के लिए तीन विकल्प होते हैं. जिसका इस्तेमाल सभी ब्राउज़र पर सबसे अच्छी तरह से काम करने के लिए किया जा सकता है:

ब्राउज़र लेवल पर लेज़ी लोडिंग की सुविधा का इस्तेमाल करना

Chrome और Firefox, दोनों ही loading एट्रिब्यूट के साथ लेज़ी लोडिंग के साथ काम करते हैं. इस एट्रिब्यूट को <img> एलिमेंट में और <iframe> एलिमेंट में भी जोड़ा जा सकता है. lazy की वैल्यू से ब्राउज़र को पता चलता है कि अगर इमेज व्यूपोर्ट में मौजूद है, तो वह तुरंत लोड हो जाए, अन्य इमेज फ़ेच करने के लिए भी किया जा सकता है.

एमडीएन का loading फ़ील्ड देखें ब्राउज़र के साथ काम करना टेबल में, ब्राउज़र के साथ काम करने के बारे में जानकारी दी गई है. अगर ब्राउज़र लेज़ी लोडिंग के साथ काम नहीं करता है, तो एट्रिब्यूट को अनदेखा कर दिया जाएगा और इमेज सामान्य रूप से तुरंत लोड हो जाएंगी.

ज़्यादातर वेबसाइटों के लिए, इस एट्रिब्यूट को इनलाइन इमेज में जोड़ने से परफ़ॉर्मेंस बेहतर होगी और उपयोगकर्ताओं को ऐसी इमेज लोड करने से रोकें जिन्हें वे कभी स्क्रोल न कर पाएं. अगर आपके पास बड़ी संख्या में इमेज हैं और आपको यह पक्का करना है कि ब्राउज़र के ऐसे उपयोगकर्ता जो लेज़ी लोडिंग के फ़ायदे के बिना काम नहीं करते आपको आगे बताए गए किसी तरीके से इसे जोड़ना होगा.

ज़्यादा जानने के लिए, वेब के लिए ब्राउज़र-लेवल पर लेज़ी लोडिंग लेख देखें.

इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करना

<img> एलिमेंट की लेज़ी लोडिंग की पॉलीफ़िल के लिए, हम JavaScript का इस्तेमाल करते हैं. इससे यह पता चलता है कि वे एलिमेंट व्यूपोर्ट. अगर वे हैं, तो उनके src (और कभी-कभी srcset) एट्रिब्यूट इसमें पसंद के इमेज कॉन्टेंट के यूआरएल शामिल किए जाते हैं.

अगर आपने पहले लेज़ी लोडिंग कोड लिखा है, तो हो सकता है कि आपने अपना टास्क पूरा कर लिया हो scroll या resize जैसे इवेंट हैंडलर का इस्तेमाल करके. हालांकि, यह तरीका सभी ब्राउज़र में सबसे अच्छी तरह काम करने वाले मॉडर्न ब्राउज़र, बेहतर परफ़ॉर्मेंस देने वाले और के माध्यम से तत्व दृश्यता की जांच करने के लिए का काम करने का एक असरदार तरीका है इंटरसेक्शन ऑब्ज़र्वर एपीआई.

कई इवेंट हैंडलर के लिए उपलब्ध है, क्योंकि आपको इवेंट हैंडलर को देखने के लिए सिर्फ़ एक ऑब्ज़र्वर को रजिस्टर करना पड़ता है करने के बजाय कई एलिमेंट का इस्तेमाल कर सकते हैं. सभी बस यह तय करना बाकी है कि किसी एलिमेंट के दिखने पर क्या किया जाए. चलिए, आपके लेज़ी लोड किए गए <img> एलिमेंट के लिए इस बेसिक मार्कअप पैटर्न को मान लेते हैं:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

इस मार्कअप के तीन ज़रूरी हिस्से हैं जिन पर आपको ध्यान देना चाहिए:

  1. class एट्रिब्यूट, जिसमें वह एलिमेंट शामिल होता है जिससे एलिमेंट को चुना जाता है JavaScript.
  2. src एट्रिब्यूट, जो एक प्लेसहोल्डर इमेज का रेफ़रंस देता है. यह इमेज कब दिखेगी सबसे पहले लोड होता है.
  3. data-src और data-srcset एट्रिब्यूट, जो प्लेसहोल्डर एट्रिब्यूट हैं इसमें उस इमेज का यूआरएल होगा जिसे एलिमेंट के व्यूपोर्ट में आने पर लोड किया जाएगा.

अब देखते हैं कि लेज़ी-लोड के लिए, JavaScript में इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल कैसे करें इस मार्कअप पैटर्न का इस्तेमाल करने वाली इमेज:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

दस्तावेज़ के DOMContentLoaded इवेंट पर, यह स्क्रिप्ट सभी के लिए DOM पर क्वेरी करती है lazy की क्लास वाले <img> एलिमेंट. अगर इंटरसेक्शन ऑब्ज़र्वर उपलब्ध है, एक नया ऑब्ज़र्वर बनाते हैं, जो img.lazy एलिमेंट के अंदर आने पर कॉलबैक चलाता है व्यूपोर्ट.

इंटरसेक्शन ऑब्ज़र्वर सभी मॉडर्न ब्राउज़र में उपलब्ध है. इसलिए, loading="lazy" के लिए इसे पॉलीफ़िल के तौर पर इस्तेमाल करने से, यह पक्का होगा कि वेबसाइट पर आने वाले ज़्यादातर लोगों के लिए लेज़ी लोडिंग की सुविधा उपलब्ध है.

सीएसएस में मौजूद इमेज

हालांकि, <img> टैग, वेब पेजों पर इमेज इस्तेमाल करने का सबसे आम तरीका है, लेकिन को CSS के ज़रिए भी शुरू किया जा सकता है background-image प्रॉपर्टी (और अन्य प्रॉपर्टी) का उपयोग कर सकते है. ब्राउज़र-लेवल की लेज़ी लोडिंग, सीएसएस के बैकग्राउंड की इमेज पर लागू नहीं होती, इसलिए, अगर आपके पास लेज़ी-लोड के लिए बैकग्राउंड इमेज हैं, तो आपको दूसरे तरीकों का इस्तेमाल करना चाहिए.

लोड होने वाले <img> एलिमेंट के उलट वे सीएसएस में इमेज लोड होने के तरीके के बारे में ज़्यादा जान सकते हैं. अनुमान. जब दस्तावेज़ और सीएसएस ऑब्जेक्ट मॉडल और रेंडर करें पेड़ बनाया जाता है, तो ब्राउज़र यह जांच करता है कि किसी दस्तावेज़ पर बाहरी संसाधनों का अनुरोध कर रहा है. अगर ब्राउज़र ने सीएसएस नियम तय किया है किसी बाहरी संसाधन को शामिल करने से दस्तावेज़ पर लागू नहीं होता, क्योंकि वह अभी है बनाए जाते हैं, तो ब्राउज़र इसका अनुरोध नहीं करता.

अनुमान पर आधारित इस व्यवहार का इस्तेमाल, सीएसएस में इमेज लोड होने से रोकने के लिए किया जा सकता है. कोई एलिमेंट व्यूपोर्ट में कब मौजूद है, यह तय करने के लिए JavaScript का इस्तेमाल करना और बाद में उस एलीमेंट में क्लास लागू करके जो स्टाइल को लागू करती है बैकग्राउंड की इमेज. इससे ज़रूरत के समय इमेज डाउनलोड हो जाती है पर लोड होने के लिए शेड्यूल करें. उदाहरण के लिए, चलिए एक ऐसा एलिमेंट लेते हैं जिसमें लार्ज हीरो बैकग्राउंड की इमेज:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

आम तौर पर, div.lazy-background एलिमेंट में हीरो बैकग्राउंड होता है कुछ CSS द्वारा शुरू की गई चित्र. हालांकि, लेज़ी लोडिंग के इस उदाहरण में, visible के ज़रिए div.lazy-background एलिमेंट की background-image प्रॉपर्टी क्लास को एलिमेंट में जोड़ा जाता है, जब यह व्यूपोर्ट में मौजूद होता है:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

यहां से, यह देखने के लिए JavaScript का इस्तेमाल करें कि एलिमेंट व्यूपोर्ट में मौजूद है या नहीं (जिसमें इंटरसेक्शन ऑब्ज़र्वर!) से, और visible क्लास को div.lazy-background एलिमेंट जोड़ा गया है, जो इमेज लोड करता है:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर असर

लेज़ी लोडिंग, एक बेहतरीन ऑप्टिमाइज़ेशन है. इससे शुरू होने के दौरान, डेटा खर्च और नेटवर्क की समस्या, दोनों को कम किया जा सकता है. इससे इमेज लोड होने में देरी होती है, ताकि वे ज़रूरत के समय ही लोड हो पाएं. इससे इमेज के शुरू होने में लगने वाला समय बढ़ सकता है. साथ ही, इमेज डीकोड करने में लगने वाले समय को कम करके, मुख्य थ्रेड पर प्रोसेसिंग कम हो सकती है.

हालांकि, लेज़ी लोडिंग एक ऐसी तकनीक है जो आपकी वेबसाइट के सबसे बड़े कॉन्टेंटफ़ुल पेंट एलसीपी पर बुरा असर डाल सकती है. आपको ऐसी इमेज से बचना चाहिए जो देर से लोड होती है. ये इमेज, स्टार्टअप के दौरान व्यूपोर्ट में मौजूद होती हैं.

JavaScript पर आधारित लेज़ी लोडर का इस्तेमाल करते समय, आपको इन-व्यूपोर्ट इमेज की लेज़ी लोडिंग से बचना चाहिए. इसकी वजह यह है कि ये समाधान अक्सर src और srcset एट्रिब्यूट के लिए प्लेसहोल्डर के तौर पर, data-src या data-srcset एट्रिब्यूट का इस्तेमाल करते हैं. यहां समस्या यह है कि इन इमेज के लोड होने में देरी होगी, क्योंकि ब्राउज़र प्रीलोड स्कैनर को स्टार्टअप के दौरान ये इमेज नहीं मिल पातीं.

यहां तक कि किसी इन-व्यूपोर्ट इमेज को लेज़ी लोड करने के लिए, ब्राउज़र-लेवल पर लेज़ी लोडिंग का इस्तेमाल करने पर भी बुरा असर पड़ सकता है. जब loading="lazy" को किसी इन-व्यूपोर्ट इमेज पर लागू किया जाता है, तो वह इमेज तब तक देरी से दिखेगी, जब तक ब्राउज़र को यह पता नहीं चल जाता कि वह व्यूपोर्ट में है. इससे किसी पेज के एलसीपी पर असर पड़ सकता है.

ऐप्लिकेशन खुलने के दौरान, व्यूपोर्ट में दिखने वाली लेज़ी लोड इमेज कभी नहीं. यह एक ऐसा पैटर्न है जिससे आपकी साइट के एलसीपी पर बुरा असर पड़ता है. साथ ही, उपयोगकर्ता अनुभव पर भी इसका बुरा असर पड़ता है. अगर आपको स्टार्टअप पर इमेज की ज़रूरत है, तो उसे लेज़ी लोड न करके, जितनी जल्दी हो सके उतनी जल्दी स्टार्टअप पर लोड करें!

लेज़ी लोडिंग लाइब्रेरी

जब भी हो सके, आपको ब्राउज़र-लेवल पर लेज़ी लोडिंग का इस्तेमाल करना चाहिए. हालांकि, अगर आपको ऐसी स्थिति में जाना चाहिए जहां यह विकल्प उपलब्ध न हो, जैसे कि पुराने ब्राउज़र का इस्तेमाल करने वाले उपयोगकर्ताओं का एक बड़ा ग्रुप, तो इमेज को लेज़ी-लोड करने के लिए, इन लाइब्रेरी का इस्तेमाल किया जा सकता है:

  • lazisizes, एक लेज़ी प्रॉडक्ट है यह लाइब्रेरी लोड हो रही है जो इमेज और iframe को लेज़ी-लोड करती है. इसके इस्तेमाल किए जाने वाले पैटर्न में यह यहां दिए गए कोड उदाहरणों से मिलता-जुलता है, जिसमें यह अपने-आप <img> एलिमेंट में lazyload क्लास शामिल है और आपको इसमें इमेज के यूआरएल डालने होंगे data-src और/या data-srcset एट्रिब्यूट, जिनका कॉन्टेंट बदला गया है src और/या srcset एट्रिब्यूट में सबमिट करें. यह इंटरसेक्शन का इस्तेमाल करता है ऑब्ज़र्वर (जिसे पॉलीफ़िल किया जा सकता है) और उसे प्लगिन का इस्तेमाल करके वीडियो को लेज़ी-लोड होने जैसे काम भी करते हैं. लेज़ीसाइज़ के इस्तेमाल के बारे में ज़्यादा जानें.
  • vanilla-lazyload लेज़ी लोडिंग इमेज, बैकग्राउंड इमेज, वीडियो, iframes, और और स्क्रिप्ट शामिल हैं. यह इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करता है, रिस्पॉन्सिव इमेज के साथ काम करता है, और ब्राउज़र-लेवल पर लेज़ी लोडिंग को चालू करता है.
  • lozad.js एक और लाइटवेट है ऐसा विकल्प जो सिर्फ़ इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करता है. इसलिए, यह बेहतर परफ़ॉर्म करने वाला है, हालांकि, इसे पुराने ब्राउज़र पर इस्तेमाल करने से पहले पॉलीफ़िल करना ज़रूरी है.
  • अगर आपको React के लिए बनी लेज़ी लोडिंग लाइब्रेरी की ज़रूरत है, तो react-lazyload के तहत आते हैं. हालांकि, यह इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल नहीं करता, यह लेज़ी का जाना-पहचाना तरीका उपलब्ध करता है उन लोगों के लिए इमेज लोड कर रहा है जिन्हें React की मदद से ऐप्लिकेशन डेवलप करने में दिलचस्पी है.