El código de evento de desplazamiento lucha por el tiempo del hilo principal: cada evento programa las lecturas del diseño y cien oyentes hacen un desplazamiento de desplazamiento. IntersectionObserver reemplaza todo el género: el navegador le indica, de forma asincrónica, cuándo los elementos ingresan a la ventana gráfica.

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));

Las reglas que lo mantienen cuerdo

  • Un observador por uso, no por elemento: no observar después de un trabajo de una sola vez, como una carga diferida; Los observadores veteranos se quedan para cosas como widgets de seguimiento fijo.
  • rootMargin se carga previamente antes de la llegada: 200 píxeles por delante para imágenes, más para insertar un vídeo.
  • Nunca analice el diseño en el estilo de devolución de llamada: la devolución de llamada activa el bucle principal, así que mantenga su trabajo pequeño y sin bloqueo.
  • Diseño para el observador que nunca dispara: sin script, carga simple = lenta en las imágenes y sin contenido oculto del que dependa su página.

La tabla de decisiones de imagen perezosa

  1. La foto principal en la parte superior de la página: no se observa carga diferida, sin carga = diferida; fetchpriority=high gana allí.
  2. Todo medido en la mitad inferior de la página: carga nativa = diferido primero; casi ningún proyecto necesita más.
  3. Widgets fuera de DOM (incrustaciones de tweets, mapas): el patrón de observador anterior, por lo que el iframe se carga solo cuando se acerca.

Este sitio no inventó nada: los héroes obtienen su prioridad de búsqueda, las imágenes corporales se cargan=perezosas y los guiones se remiten a después de la pintura. El observador completa esa historia exactamente cuando los atributos simples dejan de ser suficientes, con un alcance muy interesante.