Carga diferida con IntersectionObserver
Aplace la carga de imágenes y contenido hasta que entren en la ventana gráfica
Carga diferida con IntersectionObserver es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Más allá de loading="lazy" nativo
La carga diferida nativa cubre <img> y <iframe>. Para cualquier otro elemento —imágenes de fondo, vídeos, componentes costosos o widgets de terceros—, IntersectionObserver es la herramienta adecuada para posponer el trabajo hasta que el elemento esté cerca de la ventana gráfica.
El patrón
Marque los elementos cuya carga se pospone con un atributo data-src que contenga la fuente real y renderice un placeholder diminuto. Observe cada elemento; cuando se produzca la intersección, sustituya data-src por src (o active el elemento de otro modo) y deje de observarlo para que el callback no vuelva a ejecutarse.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Imágenes de fondo con carga diferida
CSS background-image no admite carga diferida de forma nativa. Cuando se produzca la intersección, establezca el.style.backgroundImage = `url("${el.dataset.bg}")` o añada una clase CSS que defina background-image. La imagen comenzará a descargarse en ese momento.
Vídeo con carga diferida
Para vídeos situados por debajo del contenido visible inicialmente, omita al principio los elementos src y source. Cuando se produzca la intersección, inserte las etiquetas <source> y llame a video.load(). De lo contrario, los metadatos del vídeo podrían descargarse de forma anticipada incluso antes de que el usuario se desplace cerca del elemento.
Widgets de terceros
Las inserciones de redes sociales, los widgets de comentarios y los scripts de chat pueden cargar varios megabytes. Cuando se produzca la intersección, importe dinámicamente el script de configuración del widget: await import("/embed.js"). El coste solo se asume cuando el usuario realmente se desplaza hasta la sección.
Iframe con carga diferida (más allá de loading="lazy")
La carga diferida nativa de iframes sigue descargando el documento del iframe. Para inserciones pesadas (mapas o reproductores de vídeo), utilice el patrón de «fachada»: muestre una imagen placeholder y, al hacer clic o producirse la intersección, sustitúyala por el iframe real. Esto reduce considerablemente el peso inicial de la página.
rootMargin para la precarga
rootMargin: "200px" comienza a cargar 200 px antes de que el elemento entre en la ventana gráfica. Ajuste este valor según la velocidad de desplazamiento: si es demasiado pequeño, los usuarios verán placeholders durante desplazamientos rápidos; si es demasiado grande, frustrará el propósito de la carga diferida al cargarlo todo.
Deje de observar al activarse
Llame siempre a observer.unobserve(element) después de activar la carga diferida. De lo contrario, el callback seguirá ejecutándose cada vez que el elemento vuelva a entrar en la ventana gráfica, lo que desperdicia CPU y puede causar errores si la activación no es idempotente.
Reserve espacio
Establezca width y height en las imágenes con carga diferida y un min-height en los contenedores con carga diferida. Sin dimensiones explícitas, la página se reorganiza mientras se carga el contenido, lo que provoca saltos de desplazamiento molestos y una mala puntuación de Cumulative Layout Shift.
Alternativa para usuarios sin JavaScript
Para una Progressive Enhancement completa, incluya el elemento con carga diferida en <noscript> junto con su src real: <noscript><img src="/photo.jpg"></noscript>. Los usuarios sin JavaScript obtendrán la imagen de forma inmediata; los usuarios con JavaScript, la versión con carga diferida. Combínelo con un marcado data-src adecuado.
Agrupación de muchos elementos
Una sola instancia del observador puede observar cientos de elementos de forma eficiente. No cree un observador por elemento. Cree un observador compartido con las opciones deseadas y utilice observe() para registrar cada target.
Combinación con loading="lazy" nativo
Para <img> específicamente, utilice loading="lazy" como mecanismo principal y reserve IntersectionObserver para los casos que la carga diferida nativa no cubra. Ambos mecanismos se combinan sin problemas: el nativo gestiona las imágenes situadas por debajo del contenido visible inicialmente; IntersectionObserver gestiona fondos, componentes y otros cargadores personalizados.
Comprobación de conocimientos
¿Por qué es importante llamar a observer.unobserve(element) después de activar un elemento con carga diferida?
Resumen
IntersectionObserver amplía la carga diferida más allá de <img loading="lazy"> para incluir fondos, vídeos, widgets de terceros e importaciones dinámicas de componentes. Utilice placeholders con data-src, sustitúyalos cuando se produzca la intersección y deje de observarlos después de la activación. Precargue con rootMargin, reserve espacio con width/height, proporcione una alternativa noscript y combine la carga diferida nativa cuando corresponda.
Preguntas frecuentes
¿La lección «Carga diferida con IntersectionObserver» es gratis?
Sí — el texto completo de «Carga diferida con IntersectionObserver» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Carga diferida con IntersectionObserver»?
Aplace la carga de imágenes y contenido hasta que entren en la ventana gráfica Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Carga diferida con IntersectionObserver»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- API IntersectionObserver y umbrales
- Carga diferida con IntersectionObserver
- Implementación del desplazamiento infinito
- Configuración de animaciones vinculadas al desplazamiento