Una de las formas que se suele aplicar a las imágenes para no sobrecargar el sistema es el llamado lazy-load. La idea de esto es que se vayan cargando los distintos elementos según se vayan necesitando.
De esta forma al entrar en una página veríamos todas las imágenes de la primera pantalla, pero el resto de las imágenes (las que están más abajo) no se cargan. Según vamos bajando, se van cargando los elementos.
Este sistema se ve también en algunos sitios que van cargando los contenidos inferiores según se va bajando por la pantalla, de forma que se hace una carga rápida de elementos, y sólo se van haciendo llamadas según se van necesitando.
Desde abril de 2019 existe una forma nativa de carga en algunos navegadores de Internet que permiten el sistema de loading de forma nativa.
Este parámetro permite varias opciones:
- auto: Es el comportamiento por defecto y dependerá de la configuración del navegador.
- lazy: El contenido se retrasa hasta que el sistema acerca el viewport (indicador de cercanía de elementos a la visualización del usuario).
- eager: Carga los elementos de forma forzada e inmediata.
Un ejemplo de cómo se podría ejecutar es la siguiente:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"><iframe src="https://example.com" loading="lazy"></iframe>