IntersectionObserver एपीआई और आलसी छवि लोड हो रहा है

वेब परियोजनाओं के प्रदर्शन को बेहतर बनाने के लिए आलसी छवि लोडिंग का उपयोग करना एक लोकप्रिय अनुकूलन तकनीक है। बात यह है कि चित्र "भारी" संसाधन हैं जो आधुनिक वेबसाइटों के साथ भीड़ हैं। इसके बारे में हम पहले ही कुछ प्रकाशित कर चुके हैं। यहां आप वॉलमार्ट वेबसाइट को दिए गए आलसी लोडिंग के बारे में पढ़ सकते हैं और सीख सकते हैं कि रिएक्ट प्रोजेक्ट्स में IntersectionObserver का उपयोग कैसे करें। यहाँ स्थैतिक साइटों को अनुकूलित करने पर एक लेख है। यहां ब्राउज़र टूल का उपयोग करके आलसी लोडिंग को लागू करने पर हाल की सामग्री है।



आज हम आपके ध्यान में एक लेख का अनुवाद लाते हैं जिसमें IntersectionObserver API का उपयोग एक सरल वेब पेज का उपयोग उदाहरण के रूप में किया गया है। यह सामग्री शुरुआती प्रोग्रामर के लिए अभिप्रेत है।

आलसी लोडिंग चित्र क्या है?

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

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

1. पहली अन्तरक्रियाशीलता का समय। यह वह समय है जब वेब एप्लिकेशन को उपयोगकर्ता के साथ काम करने के लिए उपयुक्त स्थिति में इंटरफ़ेस को लोड करने और लाने की आवश्यकता होती है। आलसी लोडिंग (इसके अलावा, यह केवल छवियों के बारे में नहीं है) अनुप्रयोगों को अलग-अलग कोड की तकनीक के लिए धन्यवाद प्रतिक्रिया का समय अनुकूलन करता है और लोड करने के लिए केवल एक विशेष पृष्ठ की आवश्यकता होती है या किसी विशेष समय में क्या आवश्यक होता है।
2. संसाधन की खपत। मनुष्य अधीर प्राणी है। यदि किसी वेबसाइट को लोड होने में 3 सेकंड से अधिक की आवश्यकता होती है, तो 70% उपयोगकर्ता उस साइट को छोड़ देते हैं। वेब एप्लिकेशन इतने लंबे समय तक लोड नहीं होने चाहिए। आलसी लोडिंग आपको पृष्ठों को काम करने के लिए आवश्यक संसाधनों की मात्रा को कम करने की अनुमति देता है। उदाहरण के लिए, इसका मतलब यह हो सकता है कि एक निश्चित परियोजना का कोड खंडों में टूट गया है जो केवल उन पृष्ठों पर लोड किए गए हैं जिनकी उन्हें आवश्यकता है। परिणामस्वरूप, साइट का प्रदर्शन बढ़ जाता है और सिस्टम संसाधन की खपत कम हो जाती है।

इसलिए, आलसी लोडिंग प्रौद्योगिकियां अनुप्रयोगों को गति देती हैं, जो समय वे डाउनलोड करते हैं और ऊपर लाते हैं। यह इस तथ्य के कारण प्राप्त किया जाता है कि संसाधनों को केवल तभी लोड किया जाता है जब उनकी आवश्यकता होती है।

यहाँ कुछ फायदे हैं जो आलसी लोडिंग वेब प्रोजेक्ट देता है:

• पेज तेजी से लोड होते हैं और चालू होते हैं।
• पृष्ठों के प्रारंभिक लोड होने पर, आपको कम डेटा ट्रांसफर और प्रोसेस करना होगा।

IntersectionObserver API का उपयोग करके आलसी लोडिंग छवियां

यदि आप सोचते हैं कि वेब पेज कैसे लोड होते हैं, तो यह स्पष्ट हो जाता है कि यह उन चित्रों या अन्य संसाधनों को डाउनलोड करने का कोई मतलब नहीं है जो उपयोगकर्ता को दिखाई नहीं देते हैं। आलसी लोडिंग का उपयोग करते समय, पृष्ठ के दृश्य क्षेत्र में मौजूद छवियां पहले लोड की जाती हैं। फिर, जैसे ही उपयोगकर्ता पृष्ठ को स्क्रॉल करता है, अन्य चित्र लोड होते हैं जो पृष्ठ के दृश्य क्षेत्र में आते हैं।

एक उदाहरण पर विचार करें।


पृष्ठ और उसका दृश्य क्षेत्र

पिछले आंकड़े पर एक नजर। यहां आप ब्राउज़र और वेब पेज को लोड करके देख सकते हैं। छवियाँ #IMG_1 और #IMG_2 पृष्ठ के दायरे में हैं। इसका मतलब यह है कि वे उपयोगकर्ता को दिखाई दे रहे हैं और ब्राउज़र विंडो के क्षेत्र की सीमाओं के भीतर हैं जो स्क्रीन पर प्रदर्शित होता है।

पृष्ठ के साथ काम करने के इस क्रम को आदर्श नहीं माना जा सकता है, जब इसे लोड किया जाता है, तो छवियां #IMG_1 , #IMG_2 , #IMG_3 और #IMG_4 । केवल #IMG_1 और #IMG_2 लिए दृश्यमान हैं, और #IMG_3 और #IMG_4 उससे छिपे हुए हैं। यदि आप पृष्ठ लोड करते समय पहली और दूसरी छवियों को लोड करते हैं, लेकिन तीसरी और चौथी छवियों को डाउनलोड नहीं करते हैं, तो इससे साइट के प्रदर्शन पर सकारात्मक प्रभाव पड़ सकता है। अर्थात्, हम निम्नलिखित के बारे में बात कर रहे हैं। जब उपयोगकर्ता पृष्ठ को स्क्रॉल करता है ताकि तीसरी छवि दिखाई दे - यह लोड होता है। यदि स्क्रॉलिंग जारी रहती है और चौथी छवि दिखाई देती है, तो यह भी लोड होती है।


एक पृष्ठ स्क्रॉल करना और चित्र लोड करना

अब जब हमने यह पता लगा लिया है कि हम छवियों के साथ कैसे काम करना चाहते हैं, तो हम खुद से पूछते हैं कि कैसे पता लगाया जाए कि पृष्ठ का एक निश्चित तत्व उसके दृश्य क्षेत्र में आता है। आधुनिक ब्राउज़रों में एक एपीआई होता है जो प्रोग्रामर को यह पता लगाने की अनुमति देता है कि पृष्ठ का एक निश्चित क्षेत्र कब दिखाई देता है। यह IntersectionObserver API के बारे में है। यह अतुल्यकालिक तंत्र का उपयोग करने, तत्वों की निगरानी को व्यवस्थित करने और उन मामलों में सूचनाएं प्राप्त करने की अनुमति देता है जहां एक तत्व दस्तावेज़ के दायरे को पार करता है या किसी अन्य तत्व की सीमा को पार करता है।

छवियों के आलसी लोडिंग को कॉन्फ़िगर करने के लिए, हमें सबसे पहले उस तत्व के लिए एक टेम्प्लेट कोड तैयार करना होगा जिसका उपयोग छवियों का वर्णन करने के लिए किया जाएगा। यहाँ यह है:

 <img class="lzy_img" src="lazy_img.jpg" data-src="real_img.jpg" /> 

वर्ग आपको एक तत्व की पहचान करने की अनुमति देता है, जिसमें एक छवि है जिसमें आलसी लोडिंग को लागू किया जाएगा। src विशेषता आपको वास्तविक छवि प्रदर्शित करने से पहले एक प्लेसहोल्डर छवि प्रदर्शित करने की अनुमति देती है। data-src वास्तविक छवि के पते को संग्रहीत करता है, जो कि तत्व पृष्ठ के दृश्य क्षेत्र में प्रवेश करने पर लोड किया जाएगा।

अब वह कोड लिखते हैं जो आलसी लोडिंग को लागू करता है। जैसा कि पहले ही उल्लेख किया गया है, हम उस पल का पता लगाने के लिए IntersectionObserver API का उपयोग करेंगे, जब छवि पृष्ठ देखने के क्षेत्र में प्रवेश करती है।

सबसे पहले, IntersectionObserver का एक उदाहरण बनाएं:

 const imageObserver = new IntersectionObserver(...); 

IntersectionObserver कंस्ट्रक्टर दो मापदंडों के साथ एक फ़ंक्शन को स्वीकार करता है। उनमें से एक एक सरणी को संग्रहीत करता है जिसमें तत्वों की निगरानी की आवश्यकता होती है, अन्य एक IntersectionObserver उदाहरण। यह इस तरह दिखता है:

 const imageObserver = new IntersectionObserver((entries, imgObserver) => {   entries.forEach((entry) => {       //...   }) }); 

फ़ंक्शन कोड यह देखने के लिए जांचता है entries सरणी entries द्वारा दर्शाए गए चित्र व्यूपोर्ट को काटते हैं या नहीं। यदि यह मामला है, तो इसके src विशेषता में जो संगत छवि रिकॉर्ड है उसकी data-src विशेषता है।

 const imageObserver = new IntersectionObserver((entries, imgObserver) => {   entries.forEach((entry) => {       if(entry.isIntersecting) {           const lazyImage = entry.target           lazyImage.src = lazyImage.dataset.src       }   }) }); 

यहाँ हम जाँच करते हैं कि क्या स्थिति का उपयोग करते हुए if(entry.isIntersecting) {...} , क्या तत्व ब्राउज़र देखने वाले क्षेत्र को पार करता है। यदि हां, तो हम lazyImage तत्व में img तत्व को lazyImage । फिर हम इसकी src विशेषता में लिखते हैं जो इसके src विशेषता में थी। इसके लिए धन्यवाद, छवि जिसका पता data-src में संग्रहीत data-src लोड और प्रदर्शित किया जाता है। ब्राउज़र में, यह वास्तविक छवि के साथ, प्लेसहोल्डर छवि, lazy_img.jpg बदलने की तरह दिखता है।

अब हमें हमारे हित के तत्वों की निगरानी शुरू करने के लिए हमारे IntersectionObserver उदाहरण के .observe() विधि का उपयोग करने की आवश्यकता है:

 imageObserver.observe(document.querySelectorAll('img.lzy_img')); 

यहां हम document.querySelectorAll('img.lzy_img') lzy_img क्लास के सभी document.querySelectorAll('img.lzy_img') को document.querySelectorAll('img.lzy_img') कमांड document.querySelectorAll('img.lzy_img') और उन्हें .observe() विधि से पास करते हैं। तत्वों की एक सूची प्राप्त करने के बाद, वह उन्हें देखने की प्रक्रिया शुरू करता है।

इस उदाहरण का परीक्षण करने के लिए, हम Node.js परियोजना को आरंभ करके शुरू करते हैं:

 mkdir lzy_img cd lzy_img npm init -y 

अब lzy_img फ़ोल्डर में lzy_img फ़ाइल बनाएँ:

 touch index.html 

इसमें निम्न कोड जोड़ें:

 <html> <title>Lazy Load Images</title> <body>   <div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_1.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_2.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_3.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_4.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_5.jpg" />           <hr />       </div>   </div>   <script>       document.addEventListener("DOMContentLoaded", function() {           const imageObserver = new IntersectionObserver((entries, imgObserver) => {               entries.forEach((entry) => {                   if (entry.isIntersecting) {                       const lazyImage = entry.target                       console.log("lazy loading ", lazyImage)                       lazyImage.src = lazyImage.dataset.src                   }               })           });           const arr = document.querySelectorAll('img.lzy_img')           arr.forEach((v) => {               imageObserver.observe(v);           })       })   </script> </body> </html> 

आप देख सकते हैं कि 5 चित्र यहाँ वर्णित हैं, जिसमें लोड करते समय lazy_img.jpg प्लेसहोल्डर प्रदर्शित होता है। उनमें से प्रत्येक के data-src विशेषता में वास्तविक छवियों के बारे में जानकारी शामिल है। यहाँ परियोजना में प्रयुक्त छवि नामों की एक सूची है:

 lazy_img.jpg img_1.jpg img_2.jpg img_3.jpg img_4.jpg img_5.jpg 

आपको निम्न चित्र में दिखाए गए दृश्य में प्रोजेक्ट फ़ोल्डर लाकर इन सभी छवियों को बनाने की आवश्यकता है।


प्रोजेक्ट फ़ोल्डर

मेरे मामले में, Windows पेंट का उपयोग करके lazy_img.jpg फ़ाइल तैयार की गई lazy_img.jpg , और वास्तविक चित्र ( img_*.jpg Jpg ) pixabay.com से लिए गए थे।

ध्यान दें कि IntersectionObserver आवृत्ति बनाने के लिए उपयोग किए जाने वाले कॉलबैक में एक console.log() कॉल। यह हमें विभिन्न छवियों को लोड करने के लिए ऑपरेशन करने के बारे में जानने की अनुमति देगा।

अब index.html सेवा के लिए, हम http-server पैकेज का उपयोग करते हैं:

 npm i http-server 

package.json की scripts अनुभाग में start गुण जोड़ें package.json फ़ाइल की स्थिति:

 "scripts": {   "start": "http-server ./" } 

उसके बाद, टर्मिनल में npm run start कमांड निष्पादित करें।

अब ब्राउजर खोलें और एड्रेस 127.0.0.1:8080 । बहुत शुरुआत में हमारा index.html पेज निम्नलिखित आकृति की तरह दिखाई देगा।


वास्तविक छवियों के बिना पेज

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


ब्राउज़र ने पहली छवि अपलोड की

अन्य चित्र अभी तक अपलोड नहीं किए गए हैं। वे अभी तक देखने के क्षेत्र में नहीं पहुंचे हैं।

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


एक ही छवि के कई अपलोड

यह वह नहीं है जो हमें चाहिए। इससे सिस्टम संसाधनों की अनावश्यक बर्बादी होती है और परियोजना के प्रदर्शन में गिरावट आती है।

इस समस्या को हल करने के लिए, हमें img तत्व को हटाने की आवश्यकता है, जिसके लिए वास्तविक छवि पहले से ही लोड है, तत्वों की सूची से जो कि हमारा IntersectionObserver उदाहरण देख रहा है। हमें इस तत्व से lzy_img वर्ग को निकालने की भी आवश्यकता है। यहाँ संपादित कॉलबैक फ़ंक्शन कोड में ऐसा दिखता है:

 <script>   document.addEventListener("DOMContentLoaded", function() {       const imageObserver = new IntersectionObserver((entries, imgObserver) => {           entries.forEach((entry) => {               if (entry.isIntersecting) {                   const lazyImage = entry.target                   console.log("lazy loading ", lazyImage)                   lazyImage.src = lazyImage.dataset.src                   lazyImage.classList.remove("lzy_img");                   imgObserver.unobserve(lazyImage);               }           })       });       const arr = document.querySelectorAll('img.lzy_img')       arr.forEach((v) => {           imageObserver.observe(v);       })   }) </script> 

संबंधित img तत्व की वास्तविक छवि को लोड करने के बाद, इसका lzy_img वर्ग lzy_img जाता lzy_img और तत्व को उन तत्वों की सूची से बाहर कर दिया जाता है जो IntersectionObserver देख रहे हैं।

यहाँ नमूना कोड है:

 <html> <title>Lazy Load Images</title> <body>   <div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_1.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_2.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_3.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_4.jpg" />           <hr />       </div>       <div style="">           <img class="lzy_img" src="lazy_img.jpg" data-src="img_5.jpg" />           <hr />       </div>   </div>   <script>       document.addEventListener("DOMContentLoaded", function() {           const imageObserver = new IntersectionObserver((entries, imgObserver) => {               entries.forEach((entry) => {                   if (entry.isIntersecting) {                       const lazyImage = entry.target                       console.log("lazy loading ", lazyImage)                       lazyImage.src = lazyImage.dataset.src                       lazyImage.classList.remove("lzy_img");                       imgObserver.unobserve(lazyImage);                   }               })           });           const arr = document.querySelectorAll('img.lzy_img')           arr.forEach((v) => {               imageObserver.observe(v);           })       })   </script> </body> </html> 

परिणाम

हमने छवियों के आलसी लोडिंग की प्रणाली के कार्यान्वयन के सबसे सरल उदाहरण की जांच की। लेकिन IntersectionObserver आपको काफी जटिल और आलसी लोडिंग योजनाएं बनाने की अनुमति देता है। यदि आप इस विषय में रुचि रखते हैं, तो हम अनुशंसा करते हैं कि आप सामग्री की शुरुआत में उल्लिखित प्रकाशनों को देखें और प्रलेखन पढ़ें।

प्रिय पाठकों! क्या आपके पास आलसी छवि लोड करने की प्रणाली को लागू करने के बाद वेबसाइट के प्रदर्शन में सुधार के कोई उदाहरण हैं?