Intersection Observer API

Also Known As

TL;DR

Explanation

The Intersection Observer API calls a callback when a target element intersects with a root element (or the viewport). It is asynchronous and off the main thread — far more efficient than scroll event listeners which fire on every pixel of scroll. Use cases: lazy loading images, infinite scroll, triggering CSS animations when elements enter view, sticky header detection, and ad impression tracking. threshold (0.0-1.0) defines how much of the element must be visible to trigger, rootMargin pre-loads before the element is fully visible.

Common Misconception

Why It Matters

Common Mistakes

• Not disconnecting the observer after the element is loaded — the observer keeps running unnecessarily.
• threshold: 1.0 for lazy loading — waits until the element is fully visible; use 0.1 to preload before it appears.
• No rootMargin for lazy loading — images load exactly as they enter the viewport; add '200px' margin to preload ahead.
• Using Intersection Observer for precise scroll position — it only fires at intersection thresholds, not on every pixel.

Code Examples

// Scroll event — main thread, fires hundreds of times per second:
window.addEventListener('scroll', () => {
    document.querySelectorAll('img[data-src]').forEach(img => {
        const rect = img.getBoundingClientRect();
        if (rect.top < window.innerHeight) {
            img.src = img.dataset.src; // Expensive DOM query on every scroll event
        }
    });
});

// Intersection Observer — async, efficient:
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img); // Stop observing once loaded
        }
    });
}, { rootMargin: '200px', threshold: 0.1 }); // Preload 200px before visible

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Tags

Related Terms