इंटरसेक्शन ऑब्ज़र्वर' दिख रहा है

इंटरसेक्शन ऑब्ज़र्वर से आपको यह पता चलता है कि निगरानी में रखा कोई एलिमेंट, ब्राउज़र के व्यूपोर्ट में कब शामिल होता है या बाहर निकल जाता है.

सुरमा

मान लें कि आपके डीओएम का कोई एलिमेंट, दिखने वाले व्यूपोर्ट में कब शामिल होता है, इसे ट्रैक करना है. शायद आप ऐसा करना चाहें, ताकि आप सही समय पर इमेज को लेज़ी-लोड कर सकें या आपको यह पता हो कि उपयोगकर्ता वाकई किसी खास विज्ञापन बैनर को देख रहा है या नहीं. स्क्रोल इवेंट को हुक करके या समय-समय पर चलने वाले टाइमर का इस्तेमाल करके और उस एलिमेंट पर getBoundingClientRect() को कॉल करके ऐसा किया जा सकता है.

हालांकि, यह तरीका बहुत धीमा है, क्योंकि getBoundingClientRect() को किया जाने वाला हर कॉल, ब्राउज़र को पूरे पेज को फिर से लेआउट करने के लिए मजबूर करता है. इससे आपकी वेबसाइट पर काफ़ी जैंक आ जाते हैं. जब आपको पता हो कि आपकी साइट iframe के अंदर लोड हो रही है, और आपको यह जानना है कि उपयोगकर्ता किसी एलिमेंट को कब देख सकता है, तो मामलों में बदलाव करना नामुमकिन हो जाता है. सिंगल ऑरिजिन मॉडल और ब्राउज़र, आपको वेब पेज के ऐसे किसी भी डेटा को ऐक्सेस करने की अनुमति नहीं देंगे जिसमें iframe हो. उदाहरण के लिए, iframes का इस्तेमाल करके अक्सर लोड किए जाने वाले विज्ञापनों के लिए यह एक आम समस्या है.

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

IntersectionObserver बनाने का तरीका

यह एपीआई बहुत छोटा है. इसे उदाहरण की मदद से सबसे सही तरीके से बताया गया है:

const io = new IntersectionObserver(entries => {
  console.log(entries);
}, {
  /* Using default options. Details below */
});

// Start observing an element
io.observe(element);

// Stop observing an element
// io.unobserve(element);

// Disable entire IntersectionObserver
// io.disconnect();

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

अगर आपको कई एलिमेंट देखने की ज़रूरत है, तो आपको एक ही IntersectionObserver इंस्टेंस का इस्तेमाल करके, कई एलिमेंट देखने की सलाह दी जाती है. इसके लिए, आपको observe() को कई बार कॉल करना होगा.

आपके कॉलबैक को एक entries पैरामीटर भेजा जाता है, जो IntersectionObserverEntry ऑब्जेक्ट का कलेक्शन होता है. ऐसे हर ऑब्जेक्ट में, आपके निगरानी किए गए एलिमेंट में से किसी एक के लिए अपडेट किया गया इंटरसेक्शन डेटा शामिल होता है.

🔽[IntersectionObserverEntry]
    time: 3893.92
    🔽rootBounds: ClientRect
        bottom: 920
        height: 1024
        left: 0
        right: 1024
        top: 0
        width: 920
    🔽boundingClientRect: ClientRect
    // ...
    🔽intersectionRect: ClientRect
    // ...
    intersectionRatio: 0.54
    🔽target: div#observee
    // ...

rootBounds, रूट एलिमेंट पर getBoundingClientRect() को कॉल करने का नतीजा है, जो डिफ़ॉल्ट रूप से व्यूपोर्ट होता है. boundingClientRect, मॉनिटर किए गए एलिमेंट पर कॉल किए गए getBoundingClientRect() का नतीजा है. intersectionRect इन दो रेक्टैंगल का इंटरसेक्शन है और इससे आपको यह पता चलता है कि मॉनिटर किए गए एलिमेंट का कौनसा हिस्सा दिख रहा है. intersectionRatio काफ़ी हद तक मिलता-जुलता है. इससे आपको यह पता चलता है कि एलिमेंट का कितना हिस्सा दिख रहा है. इस जानकारी की मदद से, अब ऐसेट को स्क्रीन पर दिखने से पहले ही, तुरंत लोड होने जैसी सुविधाएं लागू की जा सकती हैं. कुशलता से.

IntersectionObserver अपने डेटा को एसिंक्रोनस तरीके से डिलीवर करते हैं. साथ ही, आपका कॉलबैक कोड मुख्य थ्रेड में चलेगा. इसके अलावा, स्पेसिफ़िकेशन में कहा गया है कि IntersectionObserver को लागू करने के लिए requestIdleCallback() का इस्तेमाल करना चाहिए. इसका मतलब है कि आपके दिए गए कॉलबैक की प्राथमिकता कम है और उसे ब्राउज़र, इस्तेमाल न किए जाने के दौरान करेगा. यह डिज़ाइन से जुड़ा एक सोच-समझकर लिया गया फ़ैसला है.

स्क्रोल किए जा रहे divs

मुझे किसी एलिमेंट में स्क्रोल करना ज़्यादा पसंद नहीं है. हालांकि, इस बारे में फ़ैसला करने के लिए मुझे नहीं चुना गया है और न ही IntersectionObserver है. options ऑब्जेक्ट, root विकल्प लेता है. इसकी मदद से, रूट के तौर पर व्यूपोर्ट का कोई विकल्प तय किया जा सकता है. इस बात का ध्यान रखना ज़रूरी है कि root, मॉनिटर किए गए सभी एलिमेंट का पहले वाला होना चाहिए.

सभी चीज़ों को देखें!

नहीं! खराब डेवलपर! इससे, आपके उपयोगकर्ता के सीपीयू साइकल के इस्तेमाल का ध्यान नहीं रखा जाता. उदाहरण के तौर पर, इनफ़ाइनाइट स्क्रोलर के बारे में जानते हैं: ऐसी स्थिति में, DOM में सेंटिनल जोड़ने और उन्हें देखने (और रीसाइकल करने!) करने की सलाह दी जाती है. आपको इनफ़ाइनाइट स्क्रोलर में, आखिरी आइटम के पास एक सेंटिनल जोड़ना चाहिए. जब मैसेज भेजा जाता है, तब डेटा लोड करने, अगले आइटम बनाने, उन्हें डीओएम में अटैच करने, और भेजे गए ईमेल की जगह बदलने के लिए कॉलबैक का इस्तेमाल किया जा सकता है. अगर सेंटिनल को ठीक से रीसाइकल किया जाता है, तो observe() को अलग से कॉल करने की ज़रूरत नहीं है. IntersectionObserver काम करता रहेगा.

कृपया और अपडेट दें

जैसा कि पहले बताया गया था, ऑब्ज़र्व किया गया एलिमेंट जब व्यू में आता है, तब कॉलबैक एक बार ट्रिगर होगा और दूसरी बार तब ट्रिगर होगा, जब वह व्यूपोर्ट से बाहर निकल जाएगा. इस तरह, IntersectionObserver आपको "क्या एलिमेंट X दिख रहा है?" सवाल का जवाब देता है. हालांकि, इस्तेमाल के कुछ मामलों में हो सकता है कि यह काफ़ी न हो.

यहीं पर threshold विकल्प का इस्तेमाल किया जाता है. इसकी मदद से, intersectionRatio थ्रेशोल्ड की कैटगरी तय की जा सकती है. जब भी intersectionRatio इनमें से किसी एक वैल्यू को क्रॉस करेगा, तब आपको कॉलबैक किया जाएगा. threshold की डिफ़ॉल्ट वैल्यू [0] है, जो ऐप्लिकेशन के डिफ़ॉल्ट व्यवहार के बारे में बताती है. अगर हम threshold को [0, 0.25, 0.5, 0.75, 1] में बदलते हैं, तो हर बार एलिमेंट का एक और चौथाई हिस्सा दिखने पर हमें सूचना मिलेगी:

कोई और विकल्प?

फ़िलहाल, ऊपर दिए गए विकल्पों में से सिर्फ़ एक विकल्प मौजूद है. rootMargin आपको रूट के लिए मार्जिन तय करने की सुविधा देता है. इससे आपको चौराहों के लिए इस्तेमाल किए गए हिस्से को बढ़ाने या कम करने में मदद मिलती है. ये मार्जिन, सीएसएस की स्टाइल वाली स्ट्रिंग á la "10px 20px 30px 40px" का इस्तेमाल करके तय किए जाते हैं. इनमें सबसे ऊपर, दाएं, सबसे नीचे, और बाएं मार्जिन का इस्तेमाल किया जाता है. खास जानकारी देने के लिए, IntersectionObserver विकल्प स्ट्रक्चर में ये विकल्प मौजूद हैं:

new IntersectionObserver(entries => {/* … */}, {
  // The root to use for intersection.
  // If not provided, use the top-level document's viewport.
  root: null,
  // Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
  // If an explicit root element is specified, components may be percentages of the
  // root element size.  If no explicit root element is specified, using a
  // percentage is an error.
  rootMargin: "0px",
  // Threshold(s) at which to trigger callback, specified as a ratio, or list of
  // ratios, of (visible area / total area) of the observed element (hence all
  // entries must be in the range [0, 1]).  Callback will be invoked when the
  // visible ratio of the observed element crosses a threshold in the list.
  threshold: [0],
});

<iframe> मैजिक

IntersectionObservers को खास तौर पर, विज्ञापन सेवाओं और सोशल नेटवर्क विजेट को ध्यान में रखकर डिज़ाइन किया गया है. ये विजेट, अक्सर <iframe> एलिमेंट का इस्तेमाल करते हैं. साथ ही, उन्हें यह जानने से फ़ायदा हो सकता है कि वे व्यू में हैं या नहीं. अगर <iframe> को इसके किसी एलिमेंट का पता चलता है, तो <iframe> को स्क्रोल करने के साथ-साथ <iframe> वाली विंडो को स्क्रोल करने पर, सही समय पर कॉलबैक ट्रिगर होगा. हालांकि, बाद वाले मामले के लिए rootBounds को null पर सेट किया जाएगा, ताकि सभी ऑरिजिन में डेटा लीक होने से बचा जा सके.

IntersectionObserver नहीं किस बारे में है?

इस बात का ध्यान रखें कि IntersectionObserver जान-बूझकर न तो पिक्सल को बिलकुल सही बनाता है और न ही धीमी रफ़्तार से. इसका इस्तेमाल करके स्क्रोल-आधारित ऐनिमेशन जैसे कई तरह के काम पूरे नहीं किए जा सकते. इसकी वजह यह है कि साफ़ तौर पर कहा जाए, तो डेटा बहुत पुराना हो जाता है और समय के साथ उसका इस्तेमाल करने की ज़रूरत नहीं पड़ती. एक्सप्लेनेशंस में, IntersectionObserver को इस्तेमाल करने के मूल उदाहरणों के बारे में ज़्यादा जानकारी दी गई है.

कॉलबैक से कितना काम किया जा सकता है?

शॉर्ट 'एन स्वीट: कॉलबैक में ज़्यादा समय देने से आपका ऐप्लिकेशन लैग हो जाएगा—सभी सामान्य तरीके लागू होते हैं.

आगे बढ़ें और अपने तत्वों को प्रतिच्छेद करें

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

आप अभी IntersectionObserver का इस्तेमाल शुरू कर सकते हैं! हमें बताएं कि आपको क्या शिकायत करनी है.