5-Chargement d'image progressif

Principe du chargement différé "lazy load" Lazy laoding

Le chargement différé (lazy loading en anglais) est une stratégie d'identification des ressources non critiques (comme des images) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon de réduire le temps de chargemen de la page et de faire en sorte qu'on ne charge pas des images inutilement.

L'attribut loading utilisé sur un élément <img> peut être utilisé pour demander au navigateur de différer le chargement des images qui se situent en dehors de la zone affichée à l'écran, jusqu'à ce que la personne visitant le site ne les affiche en faisant défiler la page.

<img src="image.jpg" alt="..." loading="lazy"> Librarie "Progressive image"

Librarie JavaScript pour implémenter le chargement d'image progressif (à mesure qu'on y arrive en défilant la page).

Démo

Librairie Progressive image