🧝🏼 🎾 🎟️ इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करके आलसी लोडिंग 🤜🏿 👨‍👩‍👧‍👧 🏨

शुभ दिन, दोस्तों!

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

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

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

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

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

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

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

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

यदि एक "आलसी" डाउनलोड केवल "उपयोगकर्ता-जनित" सामग्री को डाउनलोड करने के लिए कार्य करता है, तो विपरीत तकनीक को क्या कहा जाता है? कुछ ने पहले भी आलसी लोडिंग के बारे में सुना है, लेकिन इसके विपरीत नहीं सुना है। "आलसी" लोडिंग के विपरीत "ऊर्जावान" लोडिंग है (अन्य विकल्प अधीर, तेजी से आगे बढ़ रहे हैं) - जब सभी सामग्री तुरंत प्रदान की जाती है।

क्या आप जानते हैं कि आलसी लोडिंग छवियों के लिए HTML विशेषताएँ हैं? उनका उपयोग करने के लिए, बस "img" या "iframe" तत्व में लोडिंग = "आलसी" जोड़ें।

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

इंटरसेक्शन ऑब्जर्वर एपीआई

जावास्क्रिप्ट इतनी तेजी से विकसित हो रही है कि हमें लगभग हर साल एक नया एपीआई मिलता है। नए एपीआई का मुख्य लक्ष्य भयानक एप्लिकेशन और पेज बनाने में मदद करना है।

Intersection Observer एक एपीआई है जो आपको DOM तत्वों की दृश्यता और स्थिति की निगरानी करने की अनुमति देता है। बात यह है कि यह एसिंक्रोनस रूप से काम करता है, जिससे आप हमारे डोम की सामग्री के प्रारंभिक या विलंबित लोड को निर्धारित करते हुए, तत्वों की दृश्यता को आसानी से (स्पष्ट रूप से) बदल सकते हैं।

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

अंतहीन पेज स्क्रॉलिंग - टेबल, लिस्ट, ग्रिड कंटेनर आदि की अंतहीन स्क्रॉलिंग बनाएं। यह इतना आसान कभी नहीं रहा।
छवियाँ - एक बार में सभी छवियों को क्यों अपलोड करें, जब आप "आलसी" डाउनलोड का उपयोग कर सकते हैं और केवल उस सामग्री को प्रदर्शित कर सकते हैं जो उपयोगकर्ता को इस समय चाहिए?
निगरानी तत्व - आप पृष्ठ पर तत्वों की निगरानी कर सकते हैं। उदाहरण के लिए, आपको विज्ञापनों के बंद होने के बारे में संदेश प्राप्त हो सकते हैं।

यहाँ यह सब शुरू होता है:

let myFirstObserver = new IntersectionObserver(callback, options)

हम IntersectionObserver कंस्ट्रक्टर को इनिशियलाइज़ करते हैं और इसे दो पैरामीटर पास करते हैं। पहला पैरामीटर एक कॉलबैक फ़ंक्शन है, जिसे व्यूपोर्ट के साथ हमारे तत्व के प्रतिच्छेदन के जवाब में कहा जाता है (यानी, जब तत्व व्यूपोर्ट की सीमा से परे चला जाता है) या किसी अन्य तत्व के साथ। विकल्प पैरामीटर एक ऑब्जेक्ट है जो कॉलबैक फ़ंक्शन लॉन्च करने के लिए शर्तों को नियंत्रित करता है। इस ऑब्जेक्ट में निम्न फ़ील्ड हैं:

मूल - मूल तत्व जो लक्ष्य तत्व के लिए व्यूपोर्ट के रूप में कार्य करता है (उस तत्व के लिए जो हम देख रहे हैं)
rootMargin - रूट तत्व के चारों ओर बाहरी मार्जिन (इस फ़ील्ड के मान CSS में मार्जिन मान के समान हैं)। चौराहा करने से पहले जड़ के प्रत्येक पक्ष के लिए ये मान बदल सकते हैं।
दहलीज - एक संख्या या संख्याओं का एक समूह जो मूल तत्व के साथ लक्ष्य तत्व के प्रतिच्छेदन का प्रतिशत निर्धारित करता है, जिस पर कॉलबैक फ़ंक्शन लॉन्च किया गया है

आइए एक नज़र डालते हैं कि इन्टरसेक्शन ऑब्जर्वर API का उपयोग कैसे करें:

let options = {
    root: document.querySelector('.scroll-list'),
    rootMargin: '5px',
    threshold: 0.5
}

let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)

एक तत्व को "मॉनिटरिंग" शुरू करने के लिए, आपको लक्ष्य का निर्धारण करना होगा और "ऑब्जर्व" विधि का उपयोग करके पर्यवेक्षक को कॉल करना होगा, लक्ष्य को एक पैरामीटर के रूप में पास करना:

let myDivTarget = document.querySelector('.header')

observer.observe(myDivTarget)

यह याद रखना चाहिए कि पर्यवेक्षक द्वारा देखे गए सभी तत्व आयताकार हैं। अनियमित आकार के तत्व सबसे छोटी आयत में फिट होते हैं।

ब्राउज़र समर्थन के बारे में क्या? Intersection Observer API क्रोम, एज, फ़ायरफ़ॉक्स और ओपेरा जैसे सभी आधुनिक ब्राउज़रों द्वारा समर्थित है।

यदि आप बहुत सारे डेटा के साथ काम करने का इरादा रखते हैं, उदाहरण के लिए, बहुत सारी जानकारी वाली तालिका के साथ, Intersection Observer API आपके लिए बेहद उपयोगी होगा।

इस एपीआई के फायदों में से एक यह है कि ऐसी समस्याओं को हल करने के लिए किसी भी पुस्तकालय का उपयोग करना आवश्यक नहीं है।

निष्कर्ष

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

एक अनुवादक से: लेख मुझे अपर्याप्त जानकारीपूर्ण लगा, इसलिए यहां अतिरिक्त साहित्य के लिंक दिए गए हैं:

विशिष्टता
एमडीएन (रूसी) में इंटरसेक्शन ऑब्जर्वर एपीआई के बारे में लेख
सीएसएस ट्रिक्स नमूना अनुच्छेद (अंग्रेजी)
Envato (अंग्रेजी) पर उदाहरण के साथ लेख
Google अंतहीन स्क्रॉल उदाहरण
एक कुछ और उदाहरण GitHub पर

ध्यान देने के लिए धन्यवाद।

इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करके आलसी लोडिंग

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

इंटरसेक्शन ऑब्जर्वर एपीआई

निष्कर्ष

More articles: