ब्राउज़र टूल के साथ आलसी लोडिंग इमेज

सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, Google से एडी ओसमानी कहते हैं, पहले से ही क्रोम में 75 <img> और <iframe> लोडिंग तत्वों की नई विशेषता के लिए समर्थन अच्छी तरह से दिखाई दे सकता है। इसका मतलब है कि ये तत्व तथाकथित "आलसी लोडिंग" डेटा के लिए मानक सुविधाओं का समर्थन करेंगे।


यदि आप यह जानने के लिए उत्सुक हैं कि कोड में नई विशेषता का उपयोग कैसे दिखता है, तो इस उदाहरण पर एक नज़र डालें:

 <img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> 

अब हम बात करेंगे कि loading विशेषता कैसे काम करेगी।

प्रारंभिक जानकारी

वेब पेजों में अक्सर कई छवियां शामिल होती हैं, जो पृष्ठों के आकार को प्रभावित करती हैं, इसकी अत्यधिक वृद्धि होती हैं , और लोडिंग पृष्ठों की गति को प्रभावित करती हैं। पृष्ठों पर प्रदर्शित छवियों में से कई उनके दृश्य क्षेत्र के बाहर हैं। ऐसी छवियों को देखने के लिए, उपयोगकर्ता को पृष्ठ को स्क्रॉल करने की आवश्यकता होती है।

ऐतिहासिक रूप से, पृष्ठों के दृश्य क्षेत्र के बाहर स्थित छवियों के पृष्ठों के लोडिंग समय पर प्रभाव को सीमित करने के लिए, प्रोग्रामर को जावास्क्रिप्ट पुस्तकालयों (जैसे LazySizes ) का उपयोग करना पड़ा। ये लाइब्रेरी आपको उस समय तक इस तरह की छवियों को लोड करने में देरी करती हैं जब उपयोगकर्ता, पेज के माध्यम से स्क्रॉल करते हुए, उनके करीब नहीं पहुंचता है।


पृष्ठ लोड हो रहा है 211 चित्र। एक पृष्ठ संस्करण जिसका उपयोग आलसी छवि लोड करने के लिए नहीं किया जाता है, वह तुरंत 10 एमबी ग्राफिक डेटा लोड करता है। आलसी लोडिंग (LazySizes का उपयोग करके) का एक ही पृष्ठ ग्राफिक जानकारी के केवल 250 Kb को अधिभारित करता है। पेज पर उपयोगकर्ता के जाते ही सब कुछ लोड हो जाता है। इस प्रयोग का विवरण webpagetest.org पर पाया जा सकता है।

क्या होगा यदि ब्राउज़र प्रोग्रामर को उन छवियों को लोड करने से रोकने में मदद कर सकता है जो पृष्ठों के दृश्य क्षेत्र के बाहर हैं? इससे पृष्ठ के दृश्य क्षेत्र में डेटा लोड करने की गति पर लाभकारी प्रभाव पड़ेगा, कम-शक्ति वाले उपकरणों पर, नेटवर्क पर प्रसारित डेटा की कुल मात्रा, स्मृति की खपत को कम करेगी। जल्द ही यह सब संभव होगा <img> और <iframe> loading तत्वों की नई विशेषता के लिए धन्यवाद।

लोड हो रहा है विशेषता

loading विशेषता ब्राउज़र को <img> और <iframe> तत्वों की सामग्री को लोड करने में देरी करने की अनुमति देती है जो पृष्ठ के दृश्य क्षेत्र के बाहर हैं जब तक कि उपयोगकर्ता इन तत्वों को पृष्ठ को पर्याप्त रूप से स्क्रॉल नहीं करता। यह विशेषता तीन मानों का समर्थन करती है:

• lazy : उन सामग्रियों की ओर इशारा करता है जो आलसी लोडिंग के लिए अच्छे उम्मीदवार हैं।
• eager : इस विशेषता मान वाले तत्वों को सामग्री को तुरंत लोड किया जाना चाहिए।
• auto : ब्राउज़र यह तय करेगा कि इस विशेषता मान के साथ सामग्रियों को आलसी लोडिंग लागू करना है या नहीं।

यदि आप loading विशेषता के मूल्य को निर्दिष्ट नहीं करते हैं, तो यह auto पर सेट करने के बराबर होगा।


वर्तमान में, लोडिंग विशेषता <img> और <iframe> तत्वों के लिए HTML मानक के अंतर्गत है

उदाहरण

loading विशेषता <img> तत्वों ( srcset विशेषता सहित और <picture> तत्व के अंदर) के साथ-साथ <iframe> तत्वों के साथ काम करती है।

 <!--    ,      ,   ,         --> <img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <!--    ,    --> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <!--   ,        ,   --> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <!--      <picture>.      <img>,    <picture>   srcset     --> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <!--    ,     srcset --> <img align="center" src="small.jpg"    srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"    sizes="(min-width: 36em) 33.3vw, 100vw"    alt="A rad wolf" loading="lazy"> <!--      <iframe>   ,     ,          --> <iframe src="video-player.html" loading="lazy"></iframe> 

यह ध्यान दिया जाना चाहिए कि हम निम्न प्रकार योगों का उपयोग यहां करते हैं: "जब उपयोगकर्ता पृष्ठ को स्क्रॉल करता है ताकि इसका दृश्य क्षेत्र तत्व के पास हो"। सटीक क्षण जब छवि ब्राउज़र को लोड करना शुरू कर देती है वह अपने आप निर्धारित होती है। सामान्य तौर पर, हम यह आशा कर सकते हैं कि ब्राउज़र उन सामग्रियों को डाउनलोड करना शुरू कर देगा जिनकी डाउनलोड में देरी हो गई है, कुछ समय पहले पृष्ठ का क्षेत्र जिसमें उपयोगकर्ता उन्हें दिखाई दे रहा है। इससे यह संभावना बढ़ जाएगी कि संबंधित सामग्री का डाउनलोड और आउटपुट उस समय तक पूरा हो जाएगा जब उपयोगकर्ता उन्हें देखता है।

कृपया ध्यान दें कि मैंने सुझाव दिया है कि विचाराधीन विशेषता को loading कहा loading , क्योंकि नामकरण के लिए यह दृष्टिकोण डिकोडिंग विशेषता के लिए नाम चुनते समय उपयोग किए जाने वाले से मेल खाती है। पिछले वाक्यों, जैसे कि lazy लोड, ने काम नहीं किया, क्योंकि इस विशेषता के लिए कई मूल्यों ( lazy , eager और auto ) का समर्थन करना आवश्यक था।

लोडिंग विशेषता के लिए ब्राउज़र समर्थन की जाँच करें

हमने सामग्री के आलसी लोडिंग के आयोजन के लिए जावास्क्रिप्ट पुस्तकालयों का उपयोग करने की संभावना के महत्व को ध्यान में रखा (इस सुविधा के लिए क्रॉस-ब्राउज़र समर्थन के लिए)। आप देख सकते हैं कि ब्राउज़र loading विशेषता का समर्थन करता है:

 <script> if ('loading' in HTMLImageElement.prototype) {   //   `loading`. } else {  //  -      JavaScript-   //    . } </script> 

ध्यान दें कि loading विशेषता का उपयोग पृष्ठ की क्षमताओं का उत्तरोत्तर विस्तार करने के लिए किया जा सकता है। इस विशेषता का समर्थन करने वाले ब्राउज़र loading=lazy का उपयोग करके सामग्री की आलसी डाउनलोडिंग को व्यवस्थित करने में सक्षम होंगे, और जो ब्राउज़र इस सुविधा का समर्थन नहीं करते हैं, वे इन सामग्रियों को पहले की तरह ही डाउनलोड करेंगे।

क्रॉस ब्राउज़र आलसी छवि लोड हो रहा है

यदि आलसी छवि लोड करने के लिए क्रॉस-ब्राउज़र समर्थन महत्वपूर्ण है, तो यह निर्धारित करना पर्याप्त नहीं है कि ब्राउज़र इस सुविधा का समर्थन करता है या नहीं, यदि यह उपयुक्त लाइब्रेरी का उपयोग करता है, तो आप मार्कअप में छवि का वर्णन करने के लिए <img align="center" src=unicorn.jpg loading=lazy /> जैसे डिज़ाइन का उपयोग <img align="center" src=unicorn.jpg loading=lazy /> ।

मार्कअप में, आपको नई विशेषताओं का समर्थन नहीं करने वाले ब्राउज़रों द्वारा छवि के सामान्य लोडिंग से बचने के लिए <img data-src=unicorn.jpg /> ( src , srcset या <source> बजाय) का उपयोग करने की आवश्यकता है। उन विशेषताओं को बदलने के लिए जिन्हें ब्राउज़र की loading विशेषता के समर्थन के साथ उपयोग करने की आवश्यकता है, या संबंधित लाइब्रेरी डाउनलोड करने के लिए यदि यह विशेषता समर्थित नहीं है, तो आप जावास्क्रिप्ट का उपयोग कर सकते हैं।

यहाँ एक उदाहरण है कि यह कैसे दिख सकता है:

 <!--   ,     ,   --> <img align="center" src="hero.jpg" alt=".."/> <!--    ,     --> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => {   if ('loading' in HTMLImageElement.prototype) {       const images = document.querySelectorAll("img.lazyload");       images.forEach(img => {           img.src = img.dataset.src;       });   } else {       //    LazySizes       const lazySizesLib = await import('/lazysizes.min.js');       //  LazySizes ( data-src & class=lazyload)       lazySizes.init(); // lazySizes    ,   .   } })(); </script> 

इस कोड की कुछ विशेषताओं पर विचार करें:

• पृष्ठ लोड के तुरंत बाद उपयोगकर्ता को दिखाई देने वाली छवियां नियमित <img> टैग का उपयोग करके वर्णित की जाती हैं। बिना src data-src विशेषता का उपयोग करने से पृष्ठ लोड करने के तुरंत बाद छवियों को प्रदर्शित नहीं किया जाएगा, इसलिए, उन छवियों को सेट करना जो पृष्ठ लोड करने के तुरंत बाद दिखाई देनी चाहिए, हमें src विशेषता को निर्दिष्ट करना होगा।
• पृष्ठ लोड करने के बाद उपयोगकर्ता को तुरंत दिखाई नहीं देने वाली छवियों का वर्णन करते समय, हम data-src विशेषता का उपयोग करते हैं। यह उन ब्राउज़रों में सामान्य रूप से लोड करने से रोकने के लिए किया जाता है जो loading विशेषता का समर्थन नहीं करते हैं। यदि ब्राउज़र इस विशेषता का समर्थन करता है, तो हम data-src को src बदलते हैं।
• यदि loading विशेषता का समर्थन नहीं किया जाता है, तो हम सहायक पुस्तकालय (lazySizes) को लोड करते हैं और इसे प्रारंभ करते हैं। यहाँ हम आलसी लोडिंग तकनीक का उपयोग करके काम करना चाहते हैं छवियों को लाइब्रेरी को इंगित करने के लिए class=lazyload आलसी लोड का उपयोग करते हैं।

डेमो

यहां आप एक पृष्ठ का एक उदाहरण देख सकते हैं जिस पर बिल्लियों की 100 छवियों का आलसी लोड किया जाता है। लेकिन, अगर दिलचस्पी है, तो इस पृष्ठ के वीडियो डाउनलोड करें।

क्रोम में लोडिंग विशेषता समर्थन के लिए कार्यान्वयन सुविधाएँ

हम दृढ़ता से अनुशंसा करते हैं कि उत्पादन में loading विशेषता का उपयोग करने से पहले, क्रोम के स्थिर रिलीज में इसके समर्थन की प्रतीक्षा करें। यदि आप इस अवसर का प्रयास करने के लिए उत्सुक हैं, तो शायद आप इस बारे में दिलचस्पी लेंगे कि हम किस बारे में बात करने जा रहे हैं।

लोड हो रहा है विशेषता परीक्षण

अभी नई विशेषता का अनुभव करने के लिए, Chrome झंडे सेटिंग पेज ( chrome://flags ) पर जाएं, Enable lazy frame loading Enable lazy image loading और Enable lazy image loading झंडे को Enable lazy image loading , और ब्राउज़र को पुनरारंभ करें।

ब्राउज़र सेटिंग्स

क्रोम में सामग्रियों के आलसी लोडिंग की विधि का कार्यान्वयन न केवल इस बात पर आधारित है कि पृष्ठ का दृश्य क्षेत्र इन सामग्रियों के कितने करीब है, बल्कि कनेक्शन की गति पर भी है। विभिन्न कनेक्शन गति के लिए सामग्री के आलसी लोडिंग को ट्रिगर करने के लिए थ्रेसहोल्ड कोड में हार्ड-कोड किए गए हैं, लेकिन कमांड लाइन का उपयोग करके इन मूल्यों को ओवरराइड किया जा सकता है। यहाँ छवियों के लिए सेटिंग्स ओवरराइड करने का एक उदाहरण है:

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy' 

उपरोक्त कमांड वर्तमान डिफ़ॉल्ट सेटिंग्स से मेल खाती है। छवियों को लोड करने की शुरुआत करने के लिए यदि पेज स्क्रॉल की स्थिति छवि से 400 पिक्सेल है, तो इस कमांड में सभी मान 400 में बदल दिए जाने चाहिए। निम्नलिखित इस कमांड के 1-पिक्सेल भिन्नता का एक उदाहरण है (यह सेटिंग उपरोक्त वीडियो में उपयोग की गई है )।

 canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy' 

यह बहुत संभावना है कि क्रोम में आलसी लोडिंग का मानक विन्यास बदल जाएगा क्योंकि इस सुविधा का कार्यान्वयन आने वाले हफ्तों में स्थिर हो जाएगा।

डेवलपर उपकरण

क्रोम में loading विशेषता के लिए समर्थन के कार्यान्वयन की विशेषताएं हैं कि ब्राउज़र, जब पृष्ठ लोड हो रहा है, सर्वर से पहले 2 केबी छवियों का अनुरोध करता है अगर यह रेंज अनुरोध तकनीक का समर्थन करता है। पहले 2 KB छवियों में संभवतः उनके आकारों के बारे में जानकारी शामिल है। यह ब्राउज़र को छवियों के आकार के अनुरूप प्लेसहोल्डर्स उत्पन्न करने की अनुमति देता है। इसके अलावा, इन 2K में, अगर हम आइकन जैसी छोटी छवियों के बारे में बात कर रहे हैं, तो यह बहुत संभावना है कि पूरी छवि शामिल है।


ग्राफिक फ़ाइलों के लोड हो रहे हैं

Chrome शेष छवि डेटा डाउनलोड करता है जिस क्षण उपयोगकर्ता उसे देखने के करीब है। डेवलपर टूल के साथ काम करते समय, यह इस तथ्य को जन्म दे सकता है कि नेटवर्क पैनल में दो छवि डाउनलोड की जानकारी "दिखाई दे सकती है", और प्रत्येक छवि को डाउनलोड करने के लिए किए गए दो अनुरोधों की जानकारी संसाधन समय पैनल में प्रदर्शित की जाएगी।

लोडिंग विशेषता को परिभाषित करने वाला ब्राउज़र समर्थन सर्वर

यदि हम एक आदर्श दुनिया में रहते हैं, तो यह पता लगाने के लिए कि किसी निश्चित ब्राउज़र में सही पेज आउटपुट के लिए सहायक पुस्तकालय का उपयोग करना आवश्यक है, किसी को क्लाइंट-साइड जावास्क्रिप्ट का उपयोग करके ब्राउज़र विश्लेषण पर भरोसा नहीं करना होगा। इस दृष्टिकोण के साथ, सर्वर, अग्रिम में यह जानते हुए कि इस तरह की लाइब्रेरी की आवश्यकता है या नहीं, इसमें ब्राउज़र को भेजे गए पृष्ठ में शामिल (या शामिल नहीं) होगा। HTTP क्लाइंट संकेत प्रौद्योगिकी का उपयोग करके इस तरह की जांच संभव हो सकती है, धन्यवाद जिसके कारण ग्राहक सर्वर पर अपनी क्षमताओं के बारे में "संकेत" संचारित करने में सक्षम है।

loading विशेषता के समर्थन के बारे में संबंधित "संकेत" अब विचार के प्रारंभिक चरण में है ।

परिणाम

इस सामग्री का लेखक उन सभी को आमंत्रित करता है जो <img> और <iframe> तत्वों के साथ काम loading दौरान loading विशेषता का उपयोग करने में रुचि रखते हैं और इसे अपने छापों को साझा करने का प्रयास करते हैं। वह विशेष रूप से यह जानने में रुचि रखते हैं कि कैसे, डेवलपर्स के दृष्टिकोण से, डेटा के आलसी लोडिंग के लिए यहां प्रस्तावित क्रॉस-ब्राउज़र समर्थन तंत्र दिखते हैं, और इस तरह के तंत्र के बारे में बात करने पर वह कुछ सीमावर्ती मामलों को याद करते हैं या नहीं।

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में loading विशेषता का उपयोग करने की योजना बना रहे हैं?