loading="lazy" et FIREFOX

Version imprimable

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

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. :calim2:
RAS sur Chrome et Safari :weird:
Merci pour votre aide,
ED

ce petit script ne change rien

Code:

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"
}

:calim2:

05/07/2022, 19h27
el_debutanti

1 pièce(s) jointe(s)

Pièce jointe 621814
06/07/2022, 09h04
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.

1 pièce(s) jointe(s)

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:

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>

Pièce jointe 621864Merci pour ton aide,
ED

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

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:

1 2 3 4 .hauteur { width: 500px; height: 375px; }
8O
Encore une fois, c'est une photo hauteur !
Bonne soirée,
ED

06/07/2022, 22h59
el_debutanti
et
Code:

1 2 3 4 .largeur { width: 500px; height: 167px; }
pour une image qui fait 500px de large sur 332px de haut 8O
Merci pour votre aide ;)
07/07/2022, 12h04
NoSmoking

Citation:

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 !!!

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

Code:

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);
}

Le JS, je n'y connais rien. Veux-tu y jeter un œil ?
Merci beaucoup 8-)
ED

08/07/2022, 11h55
el_debutanti

Bonjour,
Problème. résolu mais avec des photos dont la hauteur a été divisée par 2.
Bonne journée.
08/07/2022, 12h03
NoSmoking

Citation:

Problème. résolu mais avec des photos dont la hauteur a été divisée par 2.

:koi: incompréhensible, mais ma foi !