IntersectionObserver internals

Summary

Async, batched callbacks when element visibility crosses thresholds — no scroll listener jank. Root margin expands hit area for early lazy load. isIntersecting vs intersectionRatio differ near edges. Unobserve after load to save work.

Code example

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  },
  { rootMargin: '200px' },
);

Key points

• Async, batched callbacks when element visibility crosses thresholds — no scroll listener jank.
• Root margin expands hit area for early lazy load.
• isIntersecting vs intersectionRatio differ near edges.
• Unobserve after load to save work.

Further reading

• Intersection Observer
• Lazy loading images

Related concepts

• Web Components interoperability
• ResizeObserver loop limits