Ver contenido
carlosazaustre.es carlosazaustre.es

Lazy loading de imágenes ya forma parte del estándar HTML

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

El pasado 12 de Febrero de 2020 el atributo loading para imágenes e iframes se hizo por fin parte del estándar HTML. Si bien ya se podía utilizar activando un par de flags en el navegador Chrome, hasta ahora no formaba parte de las funcionalidades que soporta el navegador.

¿Que soporte tiene por los navegadores?

Ahora bien, aunque se trate de un estándar HTML, todavía no tiene el soporte de todos los navegadores can i use loading Fuente: caniuse.com

Por lo que si lo quieres utilizar, todavía necesitas de un polyfill y un poco de JavaScript.

Cómo utilizar lazy-loading nativo para imágenes

Para utilizar el lazy-loading nativo de HTML, lo más apropiado primero es detectar si el navegador soporta la funcionalidad. Si no lo hace, entonces recurríamos a un script de terceros, librería o una implementación propia en el caso de que queramos ofrecer la misma experiencia a todos los navegadores.

Para ello, con el siguiente pequeño script realizamos la comprobación:

Si el navegador lo soporta, no tenemos más que implementar el atributo loading dentro del tag img de HTML

Aquí tienes un ejemplo llamando al api de placekitten para mostrar 50 imágenes (de gatos). El código HTML sería el siguiente:

Si probamos este código en un navegador, y abrimos las Developer Tools en la pestaña de Network veremos que las primeras son cargadas automáticamente, pero a medida que hacemos scroll por la página, el resto se va descargando poco a poco.

En éste vídeo te dejo una demo:

¿Y si mi navegador no soporta el lazy-load nativo?

Si el navegador aún no implementa este nuevo estándar, gracias a la comprobación que hemos hecho antes, podemos hacer que se cargue una librería externa que actúe como polyfill y permita recrear el lazy-load veamos un ejemplo:

En este ejemplo te habrás percatado de que en los tags img no tenemos el atributo src si no uno llamado data-src esto lo hacemos para que funcione tanto de forma nativa como para la librería lazysizes que busca la imagen dentro de ese data-atribute

Si quieres ser más fancy puedes recorrer a un import dinámico de ésta manera:

Atributo loading

El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores:

  • lazy: Retrasa la carga de la imagen hasta que el usuario alcanza con el scroll una distancia calculada desde el viewport.
  • eager: Carga la imagen inmediatamente, sin importar donde está situada o colocada en la pantalla. En resumen, no hace lazy-loading.
  • auto: Implementa el comportamiento por defecto del navegador para la carga de las imágenes. En resumen, poner auto es lo mismo que no poner el atributo loading.

Distancia calculada

Las imagénes que están situadas above the fold, es decir, en la vista actual sin hacer scroll son cargadas automáticamente. Las que están por debajo no se cargan hasta que el usuario llega a ellas haciendo scroll.

Esta distancia calculada depende de varios factores: El tipo de recurso (si es una imagen o un iframe con un video por ejemplo), Si está habilitado el modo lite en Chrome par Android, el tipo de conexión (3G, 4G, HSDPA,...)

¿El nuevo atributo loading solo sirve para imágenes?

El nuevo atributo no sólo sirve para el tag img de HTML. También se puede utilizar para imágenes con srcset, dentro de picture y en iframes. Aquí tienes algunos ejemplos:

Conclusión

Si tu aplicación se basa en una alta carga de imágenes, como puede ser Instagram, ésta funcionalidad te va a permitir ahorrar mucho tiempo de carga y que la experiencia de usuario sea buena. Aún queda recorrido para que sea implementada nativamente en todos los navegadores pero mientras tanto podemos usar un polyfill si la funcionalidad no está en el navegador.

Referencias

Te dejo una lista de enlaces con más referencias sobre esto:

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y ponte al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..