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 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


Artículo anterior

Los 5 episodios de Game of Thrones para volver a ver antes de la última temporada

Esto te pondrá al día con todo lo que necesitas saber sobre la temporada 8

Artículo siguiente

En el magnífico tráiler del Rey León, el Círculo de la Vida nunca se ha visto tan bien

"Hakuna Matata" Timón y Pumba hacen su primera aparición en el nuevo tráiler

Artículos Relacionados

Como obtener al padre de un elemento con vanilla JS

Como obtener al padre de un elemento con vanilla JS

· 1 min de lectura
Cómo utilizar window.confirm()

Cómo utilizar window.confirm()

· 1 min de lectura
SVG generadores de patrones

SVG generadores de patrones

· 1 min de lectura
Como detectar un elemento sticky cuando se queda fijo

Como detectar un elemento sticky cuando se queda fijo

· 1 min de lectura
Convertir una cadena en un array en JavaScript

Convertir una cadena en un array en JavaScript

· 2 min de lectura
Video responsive de YouTube y Vimeo con HTML y CSS

Video responsive de YouTube y Vimeo con HTML y CSS

· 1 min de lectura