El IntersectionObserver es una herramienta nativa de JavaScript que te permite implementar lazy loading en imágenes, detectando cuándo aparecen en el viewport del usuario para cargarlas solo en ese momento. Es ideal para optimizar el rendimiento de aplicaciones con muchas imágenes y mejorar la velocidad de carga inicial.

¿Qué problema resuelve el lazy loading con IntersectionObserver?

Cuando recargas una página con varias imágenes, todas se descargan de golpe aunque el usuario solo vea las primeras. En la pestaña network del navegador puedes comprobarlo: aparecen películas como Loveland o Spiderman descargadas desde el inicio, aunque solo veas dos o tres en pantalla.

La idea es invertir esa lógica. Por defecto no cargas ninguna imagen, y solo cuando el usuario hace scroll y la imagen entra en su área visible, la activas.

¿Qué es el lazy loading? Es una técnica de carga diferida donde los recursos, como imágenes, se descargan solo cuando el usuario los necesita ver, no antes. Reduce el consumo inicial de red.

¿Cómo se crea una instancia de IntersectionObserver?

El IntersectionObserver es un prototipo, así que necesitas instanciarlo con new. Su constructor recibe dos argumentos: un callback y un objeto de opciones [01:55].

js const observer = new IntersectionObserver(callback, options);

El callback es la función que se ejecuta cada vez que un elemento observado entra o sale del área visible. Las opciones permiten definir el root, es decir, el contenedor HTML donde se detectarán los cambios de scroll.

¿Qué pongo en el root de las opciones?

Tienes dos caminos posibles cuando defines el root [05:35]:

• Asignar un contenedor específico, como la sección de tendencias o categorías. Esto crea un observador por cada bloque y reparte la responsabilidad.
• Dejar el root vacío para que tome todo el documento HTML por defecto. Un solo observador atiende todas las imágenes de la aplicación.

La segunda opción es más sencilla y suficiente para la mayoría de proyectos. La primera puede mejorar el rendimiento si tu sitio tiene muchísimas secciones con imágenes pesadas.

¿Cómo funciona el callback con entries y observer?

El callback recibe dos parámetros: entries y el propio observer [07:25]. Las entries son los elementos que estás observando, cada uno con información sobre si está intersectando o no con el viewport.

La lógica básica es recorrerlos con un forEach y, cuando uno aparece en pantalla, activar su carga. Para eso necesitas guardar la URL de la imagen en un atributo personalizado como data-img, en lugar del src directo.

js const callback = (entries) => { entries.forEach((entry) => { // aquí asignas el src real cuando la imagen es visible }); };

De esta forma, la imagen no se descarga hasta que tú decides asignarle el src real, justo cuando el usuario la va a ver.

¿Para qué sirve el método observe? Le indica al observador qué elemento HTML debe vigilar. Cada vez que llamas a observer.observe(elemento), ese nodo se suma a la lista de entries que el callback va a recibir.

¿Cómo conecto las imágenes con el observador?

El flujo completo se arma así:

1. Creas la instancia del IntersectionObserver con su callback.
2. Guardas las URLs de las imágenes en un atributo data-img en lugar del src.
3. Llamas a observer.observe(imagen) por cada <img> que quieras vigilar.
4. Dentro del callback, cuando la entry aparece en el viewport, asignas el src real desde el data-img.

Así, ninguna imagen se descarga al inicio. Solo las que el usuario realmente ve durante su navegación se piden al servidor, y el resto espera su turno.

El reto ahora es que tú armes esa conexión por tu cuenta. Intenta llamar a observer.observe por cada imagen y manipular el src desde el callback. No importa si no llegas a la solución completa, lo valioso es el paso a paso que sigas. Comparte en los comentarios cómo abordaste el ejercicio.