Bonjour,
dans un site en finalisation, le test avec l'inspecteur de Firefox m'indique que le lazy load que j'ai mis en place fonctionne parfaitement avec les images en html sur la balise img. Sur l'article concernant le code Javascript que j'ai récupéré https://blog.internet-formation.fr/2018/11/faire-du-lazy-loading-avec-lapi-intersection-observer-javascript/ la démarche à suivre pour les images en background css est aussi expliquée, mais ça ne fonctionne pas pour le moment chez moi sur ces images.
Voici ce qui est proposé sur le site listé plus haut pour les images en css :
Étape n°5
Si vous avez des images avec un chargement en « background » via CSS, vous pouvez ajouter la classe « bckg-img » aux blocs concernés côté HTML. Cela validera le Lazy Loading pour ces images…
<!-- Côté CSS, on aurait ceci par exemple... -->
Voici, sur mon site, la partie html sur laquelle je dois ajouter cette "class="bckg-img" :
Et mon css concernant ces images :
Le problème, aussi, c'est que ça m'oblige à mettre deux class l'une après l'autre en html et le validateur me donne une erreur de duplication de class.
Comment intégrer cette "class="bckg-img" dans mon html au bon endroit ?
Modifié par Bongota (13 Dec 2020 - 19:11)
dans un site en finalisation, le test avec l'inspecteur de Firefox m'indique que le lazy load que j'ai mis en place fonctionne parfaitement avec les images en html sur la balise img. Sur l'article concernant le code Javascript que j'ai récupéré https://blog.internet-formation.fr/2018/11/faire-du-lazy-loading-avec-lapi-intersection-observer-javascript/ la démarche à suivre pour les images en background css est aussi expliquée, mais ça ne fonctionne pas pour le moment chez moi sur ces images.
Voici ce qui est proposé sur le site listé plus haut pour les images en css :
Étape n°5
Si vous avez des images avec un chargement en « background » via CSS, vous pouvez ajouter la classe « bckg-img » aux blocs concernés côté HTML. Cela validera le Lazy Loading pour ces images…
<div id="bloc-perso" class="bckg-img"></div>
<!-- Côté CSS, on aurait ceci par exemple... -->
#bloc-perso {background:url(CHEMIN/image.png) no-repeat;}
Voici, sur mon site, la partie html sur laquelle je dois ajouter cette "class="bckg-img" :
<div id="seve" class="fixed-bg bg-1" class="bckg-img"></div>
<div class="fixed-bg bg-1-1" class="bckg-img">
<h3>1 Sève montante</h3>
<div class="text-box">
...
Et mon css concernant ces images :
.bg-1, .bg-1-1 {
background-image: url("Images/Acacia-C.JPG");
}
...
Le problème, aussi, c'est que ça m'oblige à mettre deux class l'une après l'autre en html et le validateur me donne une erreur de duplication de class.
Comment intégrer cette "class="bckg-img" dans mon html au bon endroit ?
Modifié par Bongota (13 Dec 2020 - 19:11)