Chargement progressif des images

powpowland

7 Jul 2018 à 09:38

Bonjour,
j'ai un site comportant énormément de photos et donc très lourd à charger.
Pour éviter un temps de latence assez important, j'aurais voulu que les images se chargent au fur et à mesure de la lecture du site.
J'avais trouvé un lazy load (https://bulledev.com/chargement-image-progressif-lazy-load/)
Mais le truc, pour un souci de proportion à garder des photos, j'utilise une DIV à qui je donne en background une image donc pas de balise IMG, or il me semble que ce loader n'est utilisable que sur les balise IMG.
Quelqu'un aurait une solution pour pouvoir mettre en place un système similaire mais sur des DIV?

merci

bazooka07

7 Jul 2018 à 11:56

Tous ces lazy-loaders sont basés sur la détection de l'évenement "load" émis à la fin du téléchargement de l'image dans une balise <div>.
Je ne crois pas qu'il existe un évènement équivalent pour une image de fond, toujours chargée en arrière-plan.
tu trouveras à l'adresse ci-dessous un script JS plus explicite que ton exemple :
https://codepen.io/rposbo/pen/ONmgVG

Il y a d'autres méthode listées ici :
https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

bazooka07

7 Jul 2018 à 12:14

Sur github, il y a une librairie assez sympa pour faire ce job :
https://github.com/tuupola/jquery_lazyload/tree/2.x
le paragraphe "basic usage" donne un code en exemple similaire à celui-ci :

<body>
.....
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />
...
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>
<script type="text/javascript">
lazyload(); // ajouter la class lazyload aux balises <img>
</script>
</body>

Modifié par bazooka07 (07 Jul 2018 - 12:15)

Accessibilité du Web

Chargement progressif des images