DEV Community

Cover image for Lazy-loading nativo para la web
Hebert Romero
Hebert Romero

Posted on

Lazy-loading nativo para la web

Hace un par de semanas @addyosmani nos sorprende con este tweet

Alt Text

Esto tiene unas implicaciones magnificas ya que mejorará muchísimo
el rendimiento de nuestros sitios.

¿En qué consiste ?

Desde la versión 76 de chrome ya nos es posible usar el atributo loading sin la necesidad de crear lógicas complicadas y solo
cargando las imágenes o iframes solicitados en el punto exacto del
scroll.

¿Cómo funciona ?

Su implementación es muy sencilla, solo debemos agregar el atributo

loading a el elemento img, con esto debería ser suficiente
para tener una carga diferida de nuestras imágenes qué estén en foco y
fuera de el.

Alt Text

  • Auto: Comportamiento por defecto del elemento, es como si notuviera el trbuto
  • lazy: Aplaza el llamado al recurso hasta que este en foco de pantalla
  • eager: carga el recurso inmediatamente sin importar donde este localizado en nuestra pagina.

Compatibilidad en navegadores

Hasta el día de hoy esta funcionalidad esta soportada por navegadores basados en chromium y Firefox. Pero siempre es posible consultar Compatibilidad en buscadores

Demo

Alt Text

Conclusiones

Este es un gran aporte para mejorar el desempeño de nuestros proyectos, solo queda ponerla aprueba y disfrutar.

Este post es un resumen en español del articulo en ingles
web.dev donde podrás profundizar mas sobre esta nueva funcionalidad.

Top comments (0)