Généralités
L’affichage du chargement des images au « scroll » (déroulement de la barre de navigation) permet d’économiser de la bande passante dans un premier temps.
La technique permet dans un second temps à la page (éléments de base) de s’afficher plus vite.
Pour cela 2 possibilités s’offrent à vous:
- utiliser le Javascript
- utiliser l’attribut HTML loading
Aspect technique
L’utilisation du Javascript peut-être un peu plus casse-tête à mettre en place mais a l’avantage de fonctionner sur d’anciens navigateurs ne supportant pas « loading lazy » natif.
Le « loading lazy » natif est sortie en août 2019 et il est supporté par les navigateurs récents tels que Chrome (à partir de la version 77) et Edge (à partir de la version 89).
–> Vous pouvez consulter la liste complète des navigateurs compatibles sur caniuse.
En ce qui concerne la méthode Javascript je vous invite à consulter à l’article sur le blog GeeksForGeeks.org (je ne vais pas réinventer la roue).
Vous pouvez retrouver sur ce dernier un code très bien expliqué.
Ou sinon…
Sinon vous pouvez aussi charger toutes les images après le chargement complète de la page avec 4 lignes et avec un attribut HTML data.
L’avantage ce que le client a plus de chance d’avoir l’image qui s’affiche avant qu’il arrive dessus.
exemple:
<img data="preview.jpg" data-src="monImage.jpg" alt="…" titlte="…" />
window.onload = function() {
// Au chargement ...
var all_images = document.querySelectorAll("img[data-src]"); // ici je sélectionne toutes les balises IMG avec un attribut data-src
for(i=0; i < all_images.length; i++){ // je les parcours une à une
all_images[i].src = all_images[i].getAttribute("data-src"); // je charge l'image en remplaçant l'attribut src par celui qui est dans le data-src
}
}
