Carga nativa perezosa para las imagenes (Native Image Lazy Loading)

Super interesante, "lazy loading" nativo en imágenes e iframes. En un principio solo estará disponible a partir de chrome 75. En este post, veremos el nuevo atributo de carga nativa

· 1 min de lectura
Carga nativa perezosa para las imagenes (Native Image Lazy Loading)

Estoy muy entusiasmado con el próximo atributo de carga en HTML.

IntersectionObserver ha hecho que la carga perezosa sea mucho más fácil y eficiente de lo que solía ser.

<img src="ejemplo.jpg" loading="lazy" alt="..." />
<iframe src="ejemplo.html" loading="lazy"></iframe>

En este caso, la carga perezosa lazy loading se refiere a retrasar la carga de cierto contenido hasta que el usuario este cerca de ese contenido en una página. Si nunca se desplaza al contenido, nunca se carga.

— El atributo de carga tiene tres posibles argumentos:

  • lazy: es un buen candidato para la carga perezosa.
  • eager: no es un buen candidato para la carga perezosa. Cargue de inmediato.
  • auto: el navegador determinará si se debe o no cargar perezosamente.

Probablemente ha visto librerías de carga perezosas que muestran una "vista previa" de una imagen antes de cargar toda la imagen. De alguna manera, esta es una forma muy eficiente de entregar contenido en la web, pero como esto se hace a través de JavaScript, es una especie de manera hackeada de hacer las cosas.

Estará disponible en Chrome 75 y se puede activar ya visitando chrome://flags

— Mas información:  Addy Osmani