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 se cargan las imágenes dinámicamente
- Las imágenes solo deberían cargarse cuando estén a punto de entrar en el área visible
1. Imagen Above the Fold (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 diferidamente
Estos elementos reciben clases añadidas cuando entran en la vista:
Aparecer desde la izquierda
Esta caja aparecerá desde la izquierda cuando sea visible
Aparecer desde abajo
Esta caja aparecerá desde abajo cuando sea visible
Aparecer desde la derecha
Esta caja aparecerá 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:
Observa la animación de carga brillante
Esto debería mostrar el estado de carga por más tiempo
11. Contenido HTML cargado perezosamente
Este contenedor cargará contenido HTML cuando se desplace a la vista:
12. 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 con éxito
13. 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.
14. Prueba de contenido dinámico
Haz clic en el botón de abajo para agregar dinámicamente nuevas imágenes cargadas perezosamente para probar MutationObserver: