質問編集履歴

3

追記

2021/10/20 09:10

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -152,6 +152,84 @@
152
152
 
153
153
  ```
154
154
 
155
+ ----
156
+
157
+ 追記
158
+
159
+ ```js
160
+
161
+ document.addEventListener('DOMContentLoaded', () => {
162
+
163
+ function lazyload(node) {
164
+
165
+ if ("loading" in HTMLImageElement.prototype) {
166
+
167
+ let images = node.querySelectorAll('img[loading="lazy"]');
168
+
169
+ let sources = node.querySelectorAll("source[data-srcset]");
170
+
171
+ // 省略
172
+
173
+ } else {
174
+
175
+ let script = document.createElement("script");
176
+
177
+ // 省略
178
+
179
+ }
180
+
181
+ }
182
+
183
+ lazyload(document);
184
+
185
+
186
+
187
+ if (document.getElementsByClassName("nav")[0] != null) {
188
+
189
+ fetch('/assets/include/nav.html')
190
+
191
+ .then(response => response.text())
192
+
193
+ .then(data => {
194
+
195
+ const parser = new DOMParser();
196
+
197
+ const html = parser.parseFromString(data, "text/html");
198
+
199
+ const p_elements = html.getElementsByClassName('nav')[0];
200
+
201
+ const file_area = document.getElementsByClassName("nav")[0];
202
+
203
+ file_area.innerHTML = p_elements.innerHTML;
204
+
205
+ }).then(node => {
206
+
207
+ lazyload(node)
208
+
209
+ });
210
+
211
+ }
212
+
213
+ });
214
+
215
+ ```
216
+
217
+ として、fetchの順番を守ったのですが、エラーが出てしまいました。
218
+
219
+ ```error
220
+
221
+ TypeError: node is undefined
222
+
223
+ ```
224
+
225
+ node が未設定となっているようです。
226
+
227
+ let images = node.querySelectorAll('img[loading="lazy"]'), のところです。
228
+
229
+ node に何を設定すればいいでしょうか。
230
+
231
+
232
+
155
233
 
156
234
 
157
235
  ### 補足情報(FW/ツールのバージョンなど)

2

補足

2021/10/20 09:10

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- lazysizes で画像の遅延読み込みをするのに、動的に追加した要素にも適用したです。画像の遅延読み込みを loading="lazy" に対応しているブラウザでは、lazysizes を読み込まず、data-src の値を src にセットしたいです。
5
+ 動的に追加した要素にて、画像の遅延読み込みを loading="lazy" に対応しているブラウザでは、lazysizes を読み込まず、data-src の値を src にセットしたいです。
6
+
7
+ また、インクルードするパーツは別のhtmlファイルにまとめているものを用いています。
6
8
 
7
9
 
8
10
 

1

修正

2021/10/20 08:01

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -128,6 +128,30 @@
128
128
 
129
129
 
130
130
 
131
+ コールバックを使ってみてもダメでした。
132
+
133
+ ```js
134
+
135
+ function fetchApi(func) {
136
+
137
+ // インクルードjs
138
+
139
+ func();
140
+
141
+ };
142
+
143
+ var lazyload = function () {
144
+
145
+ // lazyload 読み込み
146
+
147
+ };
148
+
149
+ fetchApi(lazyload);
150
+
151
+ ```
152
+
153
+
154
+
131
155
  ### 補足情報(FW/ツールのバージョンなど)
132
156
 
133
157
  Firefox 最新版、Safari 604.1