IntersectionObserver

Définition

API qui observe de manière asynchrone la visibilité d'un élément par rapport a un ancêtre ou au viewport. Remplace les calculs manuels de getBoundingClientRect dans un scroll listener.

Analogie

Un vigile qui te prévient automatiquement quand quelqu'un entre dans la zone de surveillance, sans que tu doives regarder constamment.

Exemple de code

const observer = new IntersectionObserver(
  (entries) => entries.forEach(e => {
    if (e.isIntersecting) loadImage(e.target);
  }),
  { threshold: 0.1 }
);
document.querySelectorAll('img[data-src]')
  .forEach(img => observer.observe(img));

Cas d'usage

Lazy loading d'images, infinité scroll, animations au scroll, tracking d'impressions.

Anti-pattern

Termes liés