Lazy Loading con Intersection Observer: Ejemplo IA

Este prompt genera una galería de imágenes con carga diferida utilizando la API nativa de Intersection Observer del navegador. La técnica consiste en cargar las imágenes únicamente cuando el usuario las desplaza hasta que entran en la pantalla visible, evitando peticiones innecesarias al servidor durante la carga inicial de la página. El resultado es código HTML, CSS y JavaScript listo para usar, con atributos data-src en las imágenes y un observador que intercambia la fuente real en el momento preciso.

Este tipo de prompt es ideal para desarrolladores front-end que buscan mejorar el rendimiento web y la puntuación en herramientas como Lighthouse o PageSpeed Insights. Se recomienda ejecutarlo en modelos como GPT-4 o Claude, ya que generan código limpio y comentado. Para variaciones útiles, puedes pedir que incluya un efecto de desvanecimiento al cargar, soporte para imágenes responsivas con srcset, o un esqueleto de carga animado mientras la imagen no está disponible.