आलसी लोडिंग कैसे काम करती है?
एक सामान्य HTML छवि इस तरह दिखती है:
<img src="sample.jpg" width="100%"/>आलसी लोडिंग प्लगइन्स इस तरह कोड को फिर से लिखते हैं:
<img data-src="sample.jpg" width="100%"/>जैसा कि आपने देखा,एसआरसीविशेषता को बदल दिया गया हैडेटा-src.
कोई वजह नहींएसआरसी, ब्राउज़र प्रारंभ में इस छवि को लोड नहीं करता है। बाद में, थोड़ा जावास्क्रिप्ट कोड जांचता है कि क्या छवि व्यूपोर्ट (उपयोगकर्ता के व्यूपोर्ट) में है, और यदि यह अंदर है,डेटा-srcउस पर लौटता हैएसआरसीकौन सा ब्राउज़र छवि के डाउनलोड और प्रदर्शन को ट्रिगर करता है।
देशी आलसी लोडिंग क्या है?
क्रोम "देशी आलसी लोडिंग" के साथ आता है। आप इसके बारे में यहां पढ़ सकते हैं।
देशी आलसी लोडिंग का यह फायदा है कि जावास्क्रिप्ट की कोई आवश्यकता नहीं है और आमतौर पर बहुत तेज होता है क्योंकि ब्राउज़र इसे "मूल रूप से" करता है।
कोड इस तरह दिखता है:
<img src="sample.jpg" loading="lazy" width="100%"/>उड़ने वाली छवियां क्या हैं?
फ्लाइंग इमेज एक उच्च प्रदर्शन वाला आलसी लोडिंग प्लगइन है। यदि उपलब्ध हो तो यह ब्राउज़र के "मूल" आलसी लोडिंग का उपयोग करता है, अन्यथा आलसी लोडिंग के लिए नियमित जावास्क्रिप्ट का उपयोग करें।
फ्लाइंग इमेज छवियों को व्यूपोर्ट में भी छवियों के प्रदर्शित होने से पहले लोड कर सकती हैं।
क्या आप आलसी लोडिंग से डरते हैं क्योंकि यह उपयोगकर्ता के अनुभव को नुकसान पहुंचाता है?
उड़ने वाली छवियां अन्य आलसी लोडिंग प्लगइन्स से कैसे भिन्न हैं?
- अंतर्निहित आलसी लोडिंग का उपयोग करता है - यदि उपलब्ध हो तो अंतर्निहित आलसी लोडिंग का उपयोग करें (वर्तमान में केवल क्रोम में समर्थित), अन्यथा आलसी लोड छवियों के लिए जावास्क्रिप्ट का उपयोग करें।
- व्यूपोर्ट में प्रवेश करने से पहले चित्र लोड करें - जबकि अन्य प्लगइन्स व्यूपोर्ट में "अंदर" होने पर छवियों को लोड करते हैं, जब वे व्यूपोर्ट में प्रवेश करने वाले होते हैं तो उड़ने वाली छवियां उन्हें लोड करती हैं।
- टिनी जावास्क्रिप्ट - केवल 0.5 केबी, संकुचित, कम।
- यदि वांछित है, तो आप केवल देशी का उपयोग कर सकते हैं - केवल क्रोम का समर्थन करना चाहते हैं? आप "केवल देशी" पर स्विच कर सकते हैं, जो जावास्क्रिप्ट को इंजेक्ट नहीं करता है।
- सभी HTML कोड को फिर से लिखता है - आलसी लोडिंग के कारण कभी भी कोई छवि न चूकें (भले ही वह गैलरी प्लगइन्स द्वारा जोड़ी गई हो)।
- पारदर्शी भराव - सभी छवियों में एक छोटा पारदर्शी बेस64 जोड़ा जाता है। छवियों को लोड करते समय और अधिक झिलमिलाहट नहीं।
- कीवर्ड बहिष्कृत करें - लगभग सभी आलसी लोडिंग प्लगइन्स एक बहिष्करण सुविधा प्रदान करते हैं, हालांकि उड़ने वाली छवियां छवि मूल नोड से छवियों को भी बाहर कर सकती हैं। उपयोगी अगर आपकी छवि में वर्ग का नाम नहीं है।
- IE और जावास्क्रिप्ट अक्षम वाले ब्राउज़र का समर्थन करता है - सभी छवियों को तुरंत लोड किया जाता है यदि यह इंटरनेट एक्सप्लोरर है या भले ही जावास्क्रिप्ट पूरी तरह से अक्षम हो (उपयोग करके
नोस्क्रिप्टउपनाम)।
