Le code de l'événement de défilement se bat pour le temps du thread principal : chaque événement planifie la lecture de la mise en page, et une centaine d'auditeurs effectuent un défilement. IntersectionObserver remplace tout le genre : le navigateur vous indique, de manière asynchrone, quand des éléments entrent dans la fenêtre.

const io = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (!e.isIntersecting) continue;
    const img = e.target;
    img.src = img.dataset.src;
    io.unobserve(img); // one-shot work: stop watching after first hit
  }
}, { rootMargin: "200px" });

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

Les règles qui le maintiennent sain d'esprit

  • Un observateur par utilisation, et non par élément : ne plus observer après un travail ponctuel comme un chargement paresseux ; les observateurs de longue date restent pour des choses comme les widgets de suivi collant.
  • rootMargin précharge avant l'arrivée : 200 px d'avance pour les images, plus pour une vidéo intégrée.
  • N'analysez jamais la mise en page dans le style de rappel : le rappel déclenche la boucle principale, gardez donc son travail petit et non bloquant.
  • Conception pour que l'observateur ne se déclenche jamais : sans script, chargement simple = paresseux sur les images et pas de contenu caché dont dépend votre page.

La table de décision des images paresseuses

  1. La photo du héros au-dessus du pli : aucun chargement paresseux observé, aucun chargement = paresseux ; fetchpriority=high y gagne.
  2. Tout est mesuré en dessous de la ligne de flottaison : chargement natif = paresseux en premier ; presque aucun projet n’a besoin de plus.
  3. Widgets hors DOM (intégrations de tweets, cartes) : le modèle d'observateur ci-dessus, donc l'iframe se charge uniquement lorsqu'elle est approchée.

Ce site n'a rien inventé : les héros gagnent leur priorité de récupération, les images corporelles portent un chargement = paresseux et les scripts s'en remettent à la peinture. L'observateur termine cette histoire exactement lorsque les attributs simples ne suffisent plus, ce qui est d'une portée très gacor.