Página de prueba de carga diferida
Esta página demuestra la carga diferida de imágenes, iframes y otros medios. Desplázate hacia abajo para ver cómo se carga el contenido a medida que aparece en la vista.
Cómo probar:
- Abre las DevTools del navegador → pestaña Red
- Filtra por Imágenes/Medios
- Desplázate lentamente hacia abajo para ver cómo las imágenes se cargan dinámicamente
- Las imágenes solo deberían cargarse cuando estén a punto de entrar en el área visible
1. Imagen sobre el pliegue (la carga diferida comienza inmediatamente)
Esta imagen es visible al cargar la página, por lo que debería comenzar a cargarse inmediatamente:
Desplázate hacia abajo para activar la carga diferida...
2. Carga diferida estándar (data-src)
Estas imágenes usan data-src atributo y se cargarán cuando se desplacen a la vista:
Imagen #1 - Se carga cuando es visible
Imagen #2 - Se carga cuando es visible
3. Imágenes responsivas con srcset
Estas imágenes usan data-srcset para carga responsiva:
4. Elemento Picture con dirección artística
Elemento Picture con diferentes fuentes para distintos tamaños de pantalla:
5. Imágenes de fondo
Estos divs usan data-lazy-bg para imágenes de fondo:
6. Clases cargadas de forma diferida
Estos elementos reciben clases añadidas cuando entran en la vista:
Aparecer desde la izquierda
Esta caja aparecerá desvaneciéndose desde la izquierda cuando sea visible
Desvanecer hacia arriba
Esta caja aparecerá desvaneciéndose desde abajo cuando sea visible
Desvanecer hacia la derecha
Esta caja aparecerá desvaneciéndose desde la derecha cuando sea visible
Estilo dinámico
Esta caja tendrá fondo primario de Bootstrap y texto blanco cuando sea visible
7. Iframes cargados perezosamente
Videos de YouTube y otros iframes que se cargan al hacer scroll:
8. Galería de imágenes
Una cuadrícula de muchas imágenes para probar el rendimiento con múltiples elementos cargados perezosamente:
9. Video cargado perezosamente
Video HTML5 que se carga al hacer scroll y entrar en vista:
10. Prueba de carga lenta (Demostración de animación de carga)
Estas imágenes de picsum.photos se cargan lentamente, para que puedas ver la animación de carga:
Mira la animación de carga brillante
Esto debería mostrar el estado de carga por más tiempo
11. Prueba de manejo de errores
Estas imágenes tienen URLs inválidas para probar el manejo de errores:
Esta imagen debería fallar al cargar
Esta imagen debería cargarse correctamente
12. Imagen final en la parte inferior
Esta imagen está en la parte más baja de la página:
🎉 ¡Has llegado al final!
Todo el contenido cargado perezosamente ahora debería ser visible.
12. Prueba de contenido dinámico
Haz clic en el botón de abajo para añadir dinámicamente nuevas imágenes cargadas perezosamente para probar MutationObserver: