Carga diferida de imágenes
Cargue imágenes solo cuando aparezcan.
Carga diferida de imágenes es una lección gratuita de JavaScript 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
La idea de la carga diferida
La carga diferida pospone la descarga de imágenes hasta que están a punto de aparecer al desplazarse. Esto ahorra ancho de banda y acelera la carga inicial de la página, especialmente en páginas largas con muchas imágenes.
Guardar la URL real
El truco consiste en no poner inicialmente la URL real de la imagen en src. Guárdela en un atributo data-src para que el navegador todavía no la descargue.
// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.Seleccionar imágenes con carga diferida
Reúna todas las imágenes que necesitan carga diferida. Una convención habitual es usar una clase compartida o la presencia de data-src.
const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');Crear el observador
Cree un observador cuyo callback cargue la imagen real cuando esta se interseque. Use rootMargin para que la imagen comience a cargarse un poco antes de aparecer.
const observer = new IntersectionObserver((entries, obs) => {
// handle entries here
}, { rootMargin: '100px' });Cargar al producirse una intersección
Cuando una imagen se interseque, copie su data-src en src. Entonces el navegador la descargará y mostrará.
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // triggers the download
}
});
}, { rootMargin: '100px' });Dejar de observar después de cargar
Una vez cargada, ya no es necesario volver a observar una imagen. Llame a unobserve para liberar recursos y evitar que se vuelva a activar.
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
obs.unobserve(img); // done watching this one
}Iniciar la observación
Recorra todas las imágenes con carga diferida e inicie su observación. El observador se encargará del resto mientras el usuario se desplaza.
lazyImages.forEach(img => observer.observe(img));Mostrar un marcador de posición
Ofrezca una experiencia fluida mostrando un marcador de posición diminuto y desenfocado o un color sólido mientras se carga la imagen real; después, muéstrela gradualmente en el evento load de la imagen.
img.addEventListener('load', () => {
img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;El atributo loading nativo
Los navegadores modernos también admiten la carga diferida nativa mediante loading="lazy" en img y iframe. Intersection Observer sigue siendo útil para obtener un control personalizado, crear animaciones o proporcionar un comportamiento alternativo.
// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">
// Observer approach gives more control and effects.Limpiar data-src
Después de cargarla, puede eliminar el atributo data-src para mantener ordenado el DOM y evitar confusiones en el código o las consultas posteriores.
img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);El patrón completo
La carga diferida con Intersection Observer es un patrón ordenado y eficiente: almacene las URL en data-src, observe cada imagen, sustituya la URL real cuando se produzca la intersección y, después, deje de observarla. El resultado es una página más rápida que carga las imágenes justo a tiempo.
Comprobación rápida
Compruebe su comprensión de la carga diferida de imágenes.
Resumen
Ha creado la carga diferida de imágenes:
- Almacene la URL real en
data-src. - Observe cada imagen con un Intersection Observer.
- Cuando se produzca la intersección, copie
data-srcensrcy useunobserve. - Use
rootMarginpara precargar justo antes de que la imagen sea visible. loading="lazy"nativo es una alternativa más sencilla.
A continuación, implementaremos el desplazamiento infinito.
Preguntas frecuentes
¿La lección «Carga diferida de imágenes» es gratis?
Sí — el texto completo de «Carga diferida de imágenes» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Carga diferida de imágenes»?
Cargue imágenes solo cuando aparezcan. Practicas JavaScript 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 JavaScript Academy?
No se requiere experiencia previa. JavaScript 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 de imágenes»?
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 JavaScript Academy?
Sí. Cada lección de JavaScript 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
- Observación de la visibilidad de elementos
- Carga diferida de imágenes
- Desplazamiento infinito
- Animaciones activadas por desplazamiento