Observadores en JavaScript

IntersectionObserver y MutationObserver vigilan sin sondear.

function lazyLoad(images) {
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  }, { rootMargin: "200px", threshold: 0 });

  images.forEach((image) => observer.observe(image));
  return () => observer.disconnect();
}

function watchList(list, onChange) {
  const observer = new MutationObserver((records) => {
    const added = records.flatMap((record) => [...record.addedNodes]);
    if (added.length) onChange(added.length);
  });
  observer.observe(list, { childList: true, subtree: true });
  return observer;
}

Cómo funciona

Un observador de intersección se dispara cuando cambia la visibilidad.
rootMargin dispara antes de que el elemento esté en pantalla.
Un observador de mutaciones reporta cambios del DOM por lotes.

Palabras clave y builtins usados aquí

const
continue
for
function
if
of
return

El intento, en números

Líneas: 22
Caracteres a escribir: 657
Tokens: 174
Ritmo de tres estrellas: 105 tpm

Al ritmo de tres estrellas de 105 tokens por minuto, este intento toma unos 99 segundos.

Escribe este fragmento

Paso 1 de 2 en Observar y dibujar; paso 9 de 13 en El navegador.

← Anterior Siguiente →