JS का IntersectionObserver
In this page:
const observer = new IntersectionObserver(entries => {
// entry.isIntersecting
}, { threshold: 0.5 });
observer.observe(element);IntersectionObserver क्या है?
IntersectionObserver यह पता लगाता है कि कब कोई element एक visible area में आता है या उससे निकलता है। यह lazy loading और scroll effects के लिए उपयोगी है।
हर scroll event पर manually element positions calculate करने के उलट, IntersectionObserver main thread को block किए बिना asynchronously और कुशलता से चलता है।
उदाहरण: What Is IntersectionObserver?
<div id="target" style="margin-top: 2000px;">Scroll to me</div>
<script>
// Declare the constant `observer` as a new `IntersectionObserver` instance
const observer = new IntersectionObserver(() => console.log("Visibility changed"));
// Call `observer.observe(document.getElementById("target"))`
observer.observe(document.getElementById("target"));
</script>Visibility जांचना
isIntersecting property आपको बताती है कि target अभी observation area को intersect कर रहा है या नहीं।
हर callback invocation को entries की एक array मिलती है, क्योंकि एक observer कई targets देख सकता है और जिनकी भी intersection state बदली हो उनकी रिपोर्ट दे सकता है।
उदाहरण: Checking Visibility
<div id="target">Target</div>
<script>
// Declare the constant `observer` as a new `IntersectionObserver` instance
const observer = new IntersectionObserver((entries) => {
// Call `entries.forEach(entry => console.log("Visible:", entry.isIntersecting))`
entries.forEach(entry => console.log("Visible:", entry.isIntersecting));
});
// Call `observer.observe(document.getElementById("target"))`
observer.observe(document.getElementById("target"));
</script>Threshold इस्तेमाल करना
एक threshold नियंत्रित करता है कि callback trigger होने से पहले target का कितना हिस्सा visible होना चाहिए। उदाहरण के लिए threshold को 0.5 सेट करना callback को सिर्फ तभी fire करता है जब target element का कम से कम आधा हिस्सा visible हो, किसी भी pixel के दिखते ही नहीं।
उदाहरण: Using Threshold
<div id="target">Target</div>
<script>
// Declare the constant `observer` as a new `IntersectionObserver` instance
const observer = new IntersectionObserver((entries) => {
// Print `"At least half visible:", entries[0].isIntersecting` to the console
console.log("At least half visible:", entries[0].isIntersecting);
}, { threshold: 0.5 });
// Call `observer.observe(document.getElementById("target"))`
observer.observe(document.getElementById("target"));
</script>Lazy Loading का Idea
IntersectionObserver किसी element के visible area के पास आने पर ही काम शुरू कर सकता है। यही ठीक-ठीक तरीका है जिससे modern lazy-loading images काम करती हैं: असली image source सिर्फ तभी request होता है जब placeholder scroll करके view में आता है।
उदाहरण: Lazy Loading Idea
<img id="photo" data-src="photo.jpg" alt="Lazy image">
<script>
// Declare the constant `observer` as a new `IntersectionObserver` instance
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// Check whether `entry.isIntersecting`
if (entry.isIntersecting) {
// Assign `entry.target.dataset.src` to `entry.target.src`
entry.target.src = entry.target.dataset.src;
// Call `observer.unobserve(entry.target)`
observer.unobserve(entry.target);
}
});
});
// Call `observer.observe(document.getElementById("photo"))`
observer.observe(document.getElementById("photo"));
</script>Observation रोकना
एक target के लिए unobserve इस्तेमाल करें या सभी targets को observe करना बंद करने के लिए disconnect। किसी element को देखने की ज़रूरत न रहने पर unobserve या disconnect से clean up करना observer को अनिश्चित काल तक अनावश्यक काम करने से रोकता है।
उदाहरण: Stopping Observation
<div id="target">Target</div>
<script>
const observer = new IntersectionObserver(() => console.log("changed"));
const el = document.getElementById("target");
observer.observe(el);
observer.unobserve(el); // stop watching this one element
</script>observer.observe(element)कॉल करना भूल जाना, इसलिए callback कभी नहीं चलता।- invalid threshold इस्तेमाल करना, जैसे
threshold: 2, जोRangeErrorthrow करता है क्योंकि यह 0 और 1 के बीच होना चाहिए। - lazy loading के बाद
unobserve()कॉल न करना, इसलिए callback चलता रहता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: