質問編集履歴

4

追記

2021/10/20 10:09

投稿

erp
erp

score45

test CHANGED
File without changes
test CHANGED
@@ -180,9 +180,7 @@
180
180
 
181
181
 
182
182
 
183
- (補足:サーバー上にコードがきちんと上がっているか、Firefoxで確認したところ、画像は表示されていました。)
183
+ (補足:サーバー上にコードがきちんと上がっているか、Firefoxで確認したところ、画像は表示されていました。キャッシュも削除しています。
184
-
185
-
186
184
 
187
185
 
188
186
 

3

追記

2021/10/20 10:09

投稿

erp
erp

score45

test CHANGED
File without changes
test CHANGED
@@ -86,6 +86,30 @@
86
86
 
87
87
  ```
88
88
 
89
+ ```CSS
90
+
91
+ .lazyloading, img[loading="lazy"], source[data-srcset] {
92
+
93
+ visibility: hidden;
94
+
95
+ opacity: 0;
96
+
97
+ }
98
+
99
+
100
+
101
+ .lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn {
102
+
103
+ visibility: visible;
104
+
105
+ opacity: 1;
106
+
107
+ transition: opacity 1s, transform 2.5s;
108
+
109
+ }
110
+
111
+ ```
112
+
89
113
 
90
114
 
91
115
  ### 試したこと
@@ -142,10 +166,28 @@
142
166
 
143
167
 
144
168
 
145
- ### 補足情報(FW/ツールのバージョンなど)
169
+ ---------------------------------------------------------------------------------
146
170
 
147
171
 
148
172
 
149
- ここにより詳細な情報を載してください
173
+ です
150
174
 
175
+
176
+
177
+ Webpに対応している Safariで確認したところ、Webp画像(source)が表示されませんでした。CSSで元の画像は非表示に、画像がロードされたらゆっくりと読み込むCSS装飾をしているのですが、非表示のままでした。SafariなどWebpに対応しているブラウザでは、そもそも兄弟要素のimgを読み込まないのかもしれません。
178
+
179
+ これを回避する方法(ほかにイベントを起こす方法)はありますでしょうか。
180
+
181
+
182
+
183
+ (補足:サーバー上にコードがきちんと上がっているか、Firefoxで確認したところ、画像は表示されていました。)
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+ ### 補足情報(FW/ツールのバージョンなど)
192
+
151
- Firefox 最新版
193
+ Firefox 最新版, Safari 604.1

2

補足

2021/10/20 07:39

投稿

erp
erp

score45

test CHANGED
File without changes
test CHANGED
@@ -120,6 +120,28 @@
120
120
 
121
121
 
122
122
 
123
+ ```js
124
+
125
+ sources.forEach(function (source) {
126
+
127
+ source.closest('picture').querySelector('img[loading="lazy"]').addEventListener('load', function () {
128
+
129
+ source.classList.add('fadeIn');
130
+
131
+ });
132
+
133
+ source.srcset = source.dataset.srcset;
134
+
135
+ });
136
+
137
+ ```
138
+
139
+ としたところ、sourceにfadeInクラスがつきました。
140
+
141
+ imgがロードされたら......という方法でしかイベントは起きないのかもしれません。
142
+
143
+
144
+
123
145
  ### 補足情報(FW/ツールのバージョンなど)
124
146
 
125
147
 

1

補足

2021/10/20 07:20

投稿

erp
erp

score45

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,26 @@
98
98
 
99
99
  どなたか、どうしてクラスが付与されないのかご存じないでしょうか。
100
100
 
101
+ ```js
102
+
103
+ sources.forEach(function (source) {
104
+
105
+ source.closest('picture').addEventListener('load', function () {
106
+
107
+ source.classList.add('fadeIn');
108
+
109
+ });
110
+
111
+ source.srcset = source.dataset.srcset;
112
+
113
+ });
114
+
115
+ ```
116
+
117
+ と、親のpictureにイベントを登録しても、クラスはつきませんでした。
118
+
119
+ onload のイベントを他に起こさないといけないのでしょうか。
120
+
101
121
 
102
122
 
103
123
  ### 補足情報(FW/ツールのバージョンなど)