Hace un par de semanas @addyosmani nos sorprende con este tweet
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.
- 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
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)