DEV Community

Cover image for Has Lazy loading de tus imágenes simple y rápido
Matías Hernández Arellano
Matías Hernández Arellano

Posted on • Originally published at matiashernandez.dev

Has Lazy loading de tus imágenes simple y rápido

Lazy loading ha sido un término que ha estado en nuestros oídos por al menos unos 15 años, durante este tiempo han existido muchas técnicas para implementar la "carga lenta" de contenido en tu sitio web, pero siempre haciendo uso de diferentes trucos con Javascript.

Es decir, para evitar que el navegador cargue todas las imágenes de sitio inmediatamente y hacerlo "bajo demanda" cuando el usuario realmente necesite verlas (como al hacer scroll), necesitas agregar Javascript al mix (por ejemplo usando IntersectionObserver).

Pero eso cambió: Ahora simplemente debes agregar el atributo loading="lazy" para lograrlo.

¿Cómo usar lazy loading en tus imágenes?

La estructura HTML es simple


<img

    src="https://images.unsplash.com/photo-1589432249902-15ab45101111?auto=format&fit=crop&w=1178&q=80"

    loading="lazy"

    onload="alert('Imagen cargada!');"

/>

Enter fullscreen mode Exit fullscreen mode

Listo, tus imágenes cargaran de forma "lazy" cuando sea necesario.

El atributo loading puede recibir diferentes valores:

  • auto - El valor por defecto que utilza lo que el navegador decida.
  • lazy - Carga la imagen caundo se vuelve visible basado en el scroll.
  • eager - Carga la imagen inmediatamente.

El atributo onload es parte de la API, permite ejecutar una función callback cuando la imagen es finalmente cargada.

¿Cuál es el soporte de navegadores?

Cómo siempre, esto es algo a tener en cuenta ya que no todos los navegadores pueden soportar nuevos atributos, la situación actual es la de la siguiente imágen

Tabla que muestra el soporte de navegadores para el atributo loading

Footer Social Card.jpg
✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Top comments (0)