IntersectionObserver

Definition

API qui observe de maniere asynchrone la visibilite d'un element par rapport a un ancetre ou au viewport. Remplace les calculs manuels de getBoundingClientRect dans un scroll listener.

Analogie

Un vigile qui te previent 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, infinite scroll, animations au scroll, tracking d'impressions.

Anti-pattern

Termes lies