लेज़ी लोडिंग के सबसे सही तरीके

Jeremy Wagner

Rachel Andrew

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

फ़ोल्ड का ध्यान रखें

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

लेज़ी लोडिंग की मदद से, संसाधन तब तक लोड होते हैं, जब तक डीओएम इंटरैक्टिव नहीं होता जब स्क्रिप्ट लोड होने और एक्ज़ीक्यूशन शुरू हो जाएं. नीचे दी गई इमेज के लिए फ़ोल्ड करना तो ठीक है, लेकिन पेज के ऊपरी हिस्से में मौजूद अहम संसाधनों में स्टैंडर्ड <img> एलिमेंट शामिल करना चाहिए, ताकि वे जल्द से जल्द दिखें.

हालांकि, इन दिनों वेबसाइट में फ़ोल्ड के बारे में भी साफ़ तौर पर नहीं पता देखा जा सकता है. लैपटॉप में फ़ोल्ड के ऊपर क्या-क्या मौजूद होता है मोबाइल डिवाइसों पर, यह नीचे मौजूद हो सकता है. बुलेटप्रूफ़ सलाह के तौर पर कोई बुलेटप्रूफ़ सलाह नहीं है समस्या को हर स्थिति में बेहतर तरीके से हल कर रहा है. इस्तेमाल करने के लिए, आपके पेज की ज़रूरी ऐसेट की इन्वेंट्री को ऑप्टिमाइज़ कर सकता है. साथ ही, उन इमेज को सामान्य रूप से लोड कर सकता है फ़ैशन.

इसके अलावा, हो सकता है कि आप फ़ोल्ड लाइन पर इतने सख्ती से ध्यान न दें कि लेज़ी लोडिंग को ट्रिगर करने के थ्रेशोल्ड को तय करता है. यह आपके मकसद के लिए ज़्यादा बेहतर हो सकता है: पेज के ऊपरी हिस्से के नीचे कुछ दूरी पर बफ़र ज़ोन बनाएं, ताकि इमेज शुरू हो सकें उपयोगकर्ता के व्यूपोर्ट में स्क्रोल करने से पहले ही अच्छी तरह से लोड हो जाता है. उदाहरण के लिए, इंटरसेक्शन ऑब्ज़र्वर एपीआई की मदद से, आपकोrootMargin विकल्प ऑब्जेक्ट दिखाता है, जब आप कोई नया IntersectionObserver इंस्टेंस बनाते हैं. यह यह सुविधा, एलिमेंट को बफ़र करती है. इससे एलिमेंट के लोड होने से पहले, लेज़ी लोडिंग की कार्रवाई ट्रिगर होती है व्यूपोर्ट में एलिमेंट मौजूद है:

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

अगर rootMargin की वैल्यू, सीएसएस के लिए तय की गई वैल्यू से मिलती-जुलती है margin प्रॉपर्टी, ऐसा इसलिए है! इस मामले में, ऑब्ज़र्व किए गए एलिमेंट का निचला मार्जिन (डिफ़ॉल्ट रूप से ब्राउज़र व्यूपोर्ट, लेकिन इसे root प्रॉपर्टी का इस्तेमाल करके किसी खास एलिमेंट में बदला जा सकता है) को 256 से बढ़ाया गया है पिक्सल. इसका मतलब है कि कॉलबैक फ़ंक्शन तब काम करेगा, जब कोई इमेज एलिमेंट और इमेज लोड होने लगेगी. इससे पहले कि उपयोगकर्ता उसे असल में देखता हो.

इंटरसेक्शन निरीक्षण का समर्थन न करने वाले ब्राउज़र में यही इफ़ेक्ट हासिल करने के लिए, स्क्रोल इवेंट हैंडलिंग कोड का इस्तेमाल करें और अपने getBoundingClientRect बफ़र को शामिल करने के लिए सही का निशान लगाएं.

लेआउट शिफ़्टिंग और प्लेसहोल्डर

प्लेसहोल्डर का इस्तेमाल न करने पर, लेज़ी लोडिंग मीडिया की वजह से लेआउट में बदलाव हो सकता है. ये बदलाव, उपयोगकर्ताओं के लिए गुमराह कर सकते हैं. साथ ही, इनसे महंगे DOM लेआउट को ट्रिगर कर सकते हैं ऐसे ऑपरेशन जो सिस्टम के संसाधनों का इस्तेमाल करते हैं और जैंक में योगदान देते हैं. कम से कम, ऐसे सॉलिड कलर प्लेसहोल्डर का इस्तेमाल करें जो डाइमेंशन वाले सॉलिड कलर के प्लेसहोल्डर या तकनीकों को इस तरह से टारगेट कर सकते हैं, जैसे कि LQIP या SQIP, जो मीडिया के कॉन्टेंट के बारे में बताता है आइटम के लोड होने से पहले.

<img> टैग के लिए, src को शुरुआत में प्लेसहोल्डर पर ले जाना चाहिए एट्रिब्यूट को फ़ाइनल इमेज यूआरएल के साथ अपडेट किया जाता है. poster एट्रिब्यूट का इस्तेमाल प्लेसहोल्डर इमेज पर ले जाने के लिए <video> एलिमेंट. इसके अलावा, width और <img> और <video> टैग, दोनों पर height एट्रिब्यूट. इससे पक्का होता है कि प्लेसहोल्डर से फ़ाइनल इमेज पर जाने से रेंडर किए गए साइज़ में कोई बदलाव नहीं होगा मीडिया लोड होने पर एलिमेंट का उपयोग करेगा.

इमेज डिकोड करने में देरी

JavaScript में बड़ी इमेज लोड करके उन्हें डीओएम में डालने से, मुख्य थ्रेड की वजह से, थोड़ी देर के लिए यूज़र इंटरफ़ेस काम नहीं करता डीकोडिंग होने तक का समय. decode का इस्तेमाल करके, इमेज को एसिंक्रोनस तरीके से डिकोड करने की सुविधा तरीका उन्हें डीओएम में डालने से पहले, इस तरह के जैंक को कम किया जा सकता है, लेकिन सावधान: यह अब तक हर जगह उपलब्ध नहीं है. साथ ही, लेज़ी लोडिंग लॉजिक को जटिल बना देता है. अगर आपको इसका इस्तेमाल करना है, तो आपको इसकी जांच करनी होगी. नीचे दिखाए गए शो फ़ॉलबैक के साथ Image.decode() का इस्तेमाल कैसे किया जा सकता है:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

यह जानने के लिए CodePen का यह लिंक देखें इस उदाहरण से मिलता-जुलता कोड. अगर आपकी ज़्यादातर इमेज काफ़ी छोटी हैं, हो सकता है कि आपको इससे ज़्यादा फ़ायदा न हो, लेकिन जैंक को रोकने में ज़रूर मदद मिल सकती है. बड़ी इमेज को लेज़ी लोड होने के साथ-साथ डीओएम में भी शामिल किया जा सकता है.

चीज़ें लोड न होने पर

कभी-कभी मीडिया के संसाधन किसी एक या किसी दूसरी वजह से लोड नहीं हो पाते हैं और गड़बड़ियां हो जाती हैं होता है. ऐसा कब हो सकता है? यह निर्भर करता है, लेकिन यहां एक काल्पनिक स्थिति दी गई है आपके लिए: आपके पास कुछ समय के लिए HTML कैशिंग नीति है (उदा., पांच मिनट) और उपयोगकर्ता उस साइट पर जाता है या किसी उपयोगकर्ता ने इसके लिए पुरानी जानकारी वाला टैब खुला छोड़ दिया है . इस प्रोसेस के कभी-कभी फिर से डिप्लॉयमेंट किया जाता है. इस डिप्लॉयमेंट के दौरान, हैश-आधारित वर्शनिंग की वजह से इमेज संसाधन का नाम बदल गया है या हटा दिया गया है कुल मिलाकर. जब तक उपयोगकर्ता इमेज को लेज़ी-लोड करता है, तब तक संसाधन उपलब्ध नहीं है और इसलिए काम नहीं करता.

हालांकि, ऐसा कम ही होता है, लेकिन फिर भी हो सकता है कि बैकअप लेने के लिए, आपको अगर लेज़ी लोडिंग न हो पाए. इमेज के लिए, समाधान कुछ ऐसा दिख सकता है शामिल करें:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

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

अन्य स्थितियां भी पैदा हो सकती हैं. आप जो भी करते हैं, वह कभी भी बुरा नहीं लगता कोई गड़बड़ी होने पर उपयोगकर्ता को संकेत दें और उन्हें कार्रवाई करने दें ताकि कुछ गड़बड़ हो जाने पर उसका इस्तेमाल किया जा सके.

JavaScript की उपलब्धता

यह नहीं मानना चाहिए कि JavaScript हमेशा उपलब्ध है. अगर आपको यहां लेज़ी-लोड होने वाली इमेज. ऐसा <noscript> मार्कअप देने के बारे में सोचें जिसमें इमेज दिखेंगी केस JavaScript उपलब्ध नहीं है. फ़ॉलबैक के सबसे आसान उदाहरण में, अगर JavaScript बंद है, तो इमेज दिखाने के लिए <noscript> एलिमेंट का इस्तेमाल किया जा सकता है:

अगर JavaScript बंद है, तो उपयोगकर्ताओं को दोनों प्लेसहोल्डर इमेज और <noscript> एलिमेंट वाली इमेज. आस-पास घूमने के लिए, यह जगह <html> टैग पर no-js की क्लास की तरह:

<html class="no-js">

इसके बाद, किसी भी स्टाइल शीट से पहले <head> में इनलाइन स्क्रिप्ट की एक लाइन रखें <link> टैग के ज़रिए अनुरोध किया जाता है. ये <html> से no-js क्लास को हटा देते हैं तत्व, यदि JavaScript चालू है:

<script>document.documentElement.classList.remove("no-js");</script>

आखिर में, लेज़ी क्लास वाले एलिमेंट को छिपाने के लिए कुछ सीएसएस का इस्तेमाल करें, जब JavaScript उपलब्ध नहीं है:

.no-js .lazy {
  display: none;
}

यह प्लेसहोल्डर इमेज को लोड होने से नहीं रोकता, लेकिन नतीजा ज़्यादा आपके काम की है. जिन लोगों के लिए JavaScript की सुविधा बंद होती है उन्हें प्लेसहोल्डर के अलावा कुछ और फ़ायदे भी मिलते हैं इसमें इमेज शामिल होती हैं. यह प्लेसहोल्डर से बेहतर है और सभी.