IntersectionObserver

Syntax

new IntersectionObserver(callback, options).observe(element)

Examples

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // load the real image
      observer.unobserve(img);    // stop watching once loaded
    }
  });
});

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

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fade-in");
    }
  });
}, { threshold: 0.5 }); // fires when 50% of the element is visible

document.querySelectorAll(".animate-on-scroll").forEach(el => {
  observer.observe(el);
});

Best practices

• Use IntersectionObserver instead of scroll event listeners for visibility detection - it is far more performant since the browser handles the calculation efficiently
• Call unobserve() once an element no longer needs watching (like after a lazy-loaded image has loaded), to free up resources
• Use the threshold option to control exactly what percentage of visibility should trigger the callback
• Use rootMargin to trigger the callback slightly before an element actually enters the viewport, for smoother lazy-loading

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation