Discussion :

[el_debutanti]

Bonjour à tous,
J'ai une galerie d'images :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="grid__item" data-size="1023x1536">
<figure> <a href="./imgs/pds_4@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_4.jpg" alt="Marcus Miller" loading="lazy" /></a>
<figcaption><strong>Marcus Miller</strong></figcaption></figure>

Mais depuis le loading lazy, les images se superposent sur Firefox.
RAS sur Chrome et Safari
Merci pour votre aide,
ED

[el_debutanti]

ce petit script ne change rien

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if ('loading' in HTMLImageElement.prototype) {
    // Si le navigateur supporte le lazy-loading natif
} else {
    // Lazy loading de remplacement, soit via un polyfill, soit par un code "fait maison"
}

[el_debutanti]

[NoSmoking]

Bonjour,
les différents moteurs de rendu n'ont pas tous la même façon de gérer l'affichage des images mais si tu veux leur faciliter la tâche, et accessoirement épargner la vue des visiteurs en leur évitant les « sautes d'écran » liées au « lazy loading », affecte à tes images une width et une height via les CSS ou directement dans la balise.

Tu peux également regarder du côté de l'enregistrement de tes images, si JPEG, au format JPEG progressif.

[el_debutanti]

Bonjour nosmoking,
Les images sont bien en jpeg progressif.
J'ai un phénomène étrange en mettant une width et une height (voir capture).
Le

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
								<div class="grid__item" data-size="1023x1536">
							<figure> <a href="./imgs/pds_1@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_1.jpg" loading="lazy" width="1023px" height= "1536px" alt="Marcus Miller" /></a>
														<figcaption><strong>Marcus Miller</strong></figcaption></figure>
 
							<div class="description description--grid"> <h1><strong><a href="http://www.marcusmiller.com/" target="_blank">Marcus Miller</a></strong></h1><h2>Palais des Sports, Paris. 5 juillet 1994</h2></div>
 
							</div>							<div class="grid__item" data-size="1023x1536">
							<figure> <a href="./imgs/pds_2@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_2.jpg" loading="lazy" width="1023px" height= "1536px" lt="Marcus Miller" /></a>
														<figcaption><strong>Marcus Miller</strong></figcaption></figure>
 
							<div class="description description--grid"> <h1><strong><a href="http://www.marcusmiller.com/" target="_blank">Marcus Miller</a></strong></h1><h2>Palais des Sports, Paris. 5 juillet 1994</h2></div>

Merci pour ton aide,
ED

[el_debutanti]

Je me suis trompé dans les valeurs. Les images font 500px de large sur 750px.
Ça fonctionne avec une class :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="grid__item" data-size="1023x1536">
<figure> <a href="./imgs/pds_1@2x.jpg" class="img-wrap" ><img src="./imgs/thumbs/pds_1.jpg" class="hauteur" loading= "lazy" alt="Marcus Miller" /></a>
<figcaption><strong>Marcus Miller</strong></figcaption></figure>

mais ce que je ne comprends pas, c'est pourquoi, pour que l'image soit de taille correcte, je dois mettre cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.hauteur {
		width: 500px;
		height: 375px;
	}

Encore une fois, c'est une photo hauteur !
Bonne soirée,
ED