Intersection Observer

Definition

L'Intersection Observer surveille de maniere asynchrone la visibilite d'un element par rapport a un conteneur ou au viewport. Il declenche un callback quand le ratio de visibilite franchit un seuil defini.

Analogie

Un detecteur de mouvement a l'entree d'un magasin : il ne se declenche que quand quelqu'un entre dans son champ de vision.

Exemple de code

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add(class="str">'visible');
  });
}, { threshold: 0.5 });
observer.observe(document.querySelector(class="str">'.card'));

Cas d'usage

Implementer le lazy loading d'images ou declencher des animations au scroll sans evenement scroll.