loading="lazy" et FIREFOX

**el_debutanti** · 05/07/2022, 16h31

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** · 05/07/2022, 19h15

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** · 05/07/2022, 19h27

Nom : Capture d’écran 2022-07-05 à 19.27.03.jpg
Affichages : 243
Taille : 591,0 Ko

**NoSmoking** · 06/07/2022, 09h04

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** · 06/07/2022, 14h51

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>

Nom : Capture d’écran 2022-07-06 à 14.40.24.jpg
Affichages : 227
Taille : 287,0 Ko

Merci pour ton aide,
ED

**el_debutanti** · 06/07/2022, 22h40

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

**el_debutanti** · 06/07/2022, 22h59

et

Code :

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

1
2
3
4
	.largeur {
		width: 500px;
		height: 167px;
	}

pour une image qui fait 500px de large sur 332px de haut

Merci pour votre aide

**NoSmoking** · 07/07/2022, 12h04

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

parce que ... plus sérieusement avec le peu que l'on a difficile de t'aider, le rapport en hauteur étant de 2 c'est une piste à fouiller, javascript prenant la main, css parasite ... mais !!!

**el_debutanti** · 07/07/2022, 14h45

Bonjour NoSMoking,
Je ne vois rien dans les CSS qui puisse interférer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
.grid {
	position: relative;
	margin: 0 auto;
}
 
.js .grid::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	/*background: #252323 url(./imgs/ico_loading.gif) no-repeat 50% 75px;*/
	background-size: 60px auto;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
 
.js .grid--loaded::after {
	opacity: 0;
}
 
.grid__item {
	width: 270px;
	padding: 10px;
}
 
.grid__item--current {
	opacity: 0 !important;
}
 
.img-wrap {
	display: block;
}
 
.img-wrap:focus,
.img-wrap:hover {
	outline: none;
}
 
.img-wrap img {
	display: block;
	max-width: 100%;
}
 
.preview {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-line-pack: center;
	-webkit-align-content: center;
	align-content: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
 
.preview--open {
	pointer-events: auto;
}
 
 
/* circle overlay (generated SVG) */
 
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
.overlay circle {
	-webkit-transition: fill-opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: fill-opacity 0.3s, transform 0s 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale3d(0, 0, 1);
	transform: scale3d(0, 0, 1);
	fill: #1f1d1d;
	fill-opacity: 0;
}
 
.preview--open .overlay circle {
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	fill-opacity: 1;
}
 
.clone {
	position: fixed;
	z-index: 110;
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	transition: transform 0.6s cubic-bezier(0.5, 1, 0.2, 1);
	-webkit-backface-visibility: hidden;
}
 
.original {
	position: relative;
	z-index: 120;
	display: block;
	object-fit: contain;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-backface-visibility: hidden;
}
 
.preview--open .animate {
	/* open */
	-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
	transition: transform 0.6s, opacity 0.2s;
}
 
.animate {
	/* close */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
 
.description {
	color: #fff;
}
 
.js .description--grid {
	display: none;
}
 
.description--preview {
	position: fixed;
	z-index: 140;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 1em;
	text-align: center;
	opacity: 0;
	background: linear-gradient(180deg, transparent, #1f1d1d);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
 
.preview--open .description--preview {
	opacity: 1;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}