JS IntersectionObserver
In this page:
const observer = new IntersectionObserver(entries => {
// entry.isIntersecting
}, { threshold: 0.5 });
observer.observe(element);What Is IntersectionObserver?
IntersectionObserver detects when an element enters or leaves a visible area. It is useful for lazy loading and scroll effects.
Unlike manually calculating element positions on every scroll event, IntersectionObserver runs asynchronously and efficiently without blocking the main thread.
उदाहरण: 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>Checking Visibility
The isIntersecting property tells you whether the target is currently intersecting the observation area.
Each callback invocation receives an array of entries, since one observer can watch multiple targets and report on whichever ones changed 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>Using Threshold
A threshold controls how much of the target must be visible before a callback is triggered. Setting threshold to 0.5, for example, only fires the callback once at least half of the target element is visible, rather than as soon as any pixel appears.
उदाहरण: 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 can start work only when an element approaches the visible area. This is exactly how modern lazy-loading images work: the real image source is only requested once the placeholder scrolls into 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>Stopping Observation
Use unobserve for one target or disconnect to stop observing all targets. Cleaning up with unobserve or disconnect once an element no longer needs watching prevents the observer from doing unnecessary work indefinitely.
उदाहरण: 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>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: