11528 sujets

JavaScript, DOM et API Web HTML5

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…
<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&nbsp;&nbsp;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)
Modérateur
Peut-être est ce la fin de la journée , mais ajouter une class se fait dans l'unique attribut de la balise, .. ce n'est pas un id :

class="fixed-bg bg-1-1 bckg-img"


;)
Le id="seve" est ajouté ici afin de permettre une ancre sur cette partie. Il s'agit d'un site one page et je dois donner la possibilité d'aller dans des parties de la page avec des liens.
Mais je peux mettre cette ancre ailleurs, simplement, là où elle est placée, on arrive juste à l'endroit voulu.
Bonsoir Bongota,
gcyrillus pointait simplement le fait que tu as mis 2 attributs "class" sur tes éléments. Il ne faut en mettre qu'un seul avec l'ensemble de tes classes dans cet attribut.
Smiley cligne
Oui, bien compris. Le plus fort, c'est que j'ai enlevé ces doublons de façon à me conformer à la proposition de gcyrillus et le site continu à fonctionner. Je n'avais pourtant pas inventé ce code, je l'avais pris sur un CodePen valide.
Maintenant, le lazy load sur les images en css ne fonctionne toujours pas, mais j'y vois plus clair. Merci.