前提・実現したいこと
動的に追加した要素について、画像の遅延読み込みを loading="lazy" に対応しているブラウザでは、lazysizes を読み込まず、data-src の値を src にセットしたいです。
また、インクルードするパーツは別のhtmlファイルにまとめているものを用いています。
発生している問題・エラーメッセージ
エラーは特にないです。
該当のソースコード
// インクルード
js
1if (document.getElementsByClassName("nav") != null) {
2 window.addEventListener('DOMContentLoaded', function () {
3 fetch('/assets/include/nav.html')
4 .then(response => response.text())
5 .then(data => {
6 const parser = new DOMParser();
7 const html = parser.parseFromString(data, "text/html");
8 const p_elements = html.getElementsByClassName('nav')[0];
9 const file_area = document.getElementsByClassName("nav")[0];
10 file_area.innerHTML = p_elements.innerHTML;
11 });
12 });
13}
// lazyload の読み込み
js
1document.addEventListener('DOMContentLoaded', function () {
2 if ("loading" in HTMLImageElement.prototype) {
3 var images = document.querySelectorAll('img[loading="lazy"]');
4 var sources = document.querySelectorAll("source[data-srcset]");
5 sources.forEach(function (source) {
6 source.srcset = source.dataset.srcset; // ここが効かない
7 });
8 images.forEach(function (img) {
9 img.src = img.dataset.src; // ここが効かない
10 });
11 } else {
12 var script = document.createElement("script");
13 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js";
14 script.async = true;
15 document.body.appendChild(script);
16 var script_02 = document.createElement("script");
17 script_02.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.min.jss";
18 script_02.async = true;
19 document.body.appendChild(script_02);
20 }
21})
// インクルードするパーツ
HTML
1<div class="nav">
2 <picture>
3 <source type="image/webp" data-srcset="/images/7.png.webp">
4 <img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/7.png">
5 </picture>
6</div>
試したこと
js
1document.addEventListener('DOMContentLoaded', function () {
で囲んでもダメだったのでどうすればいいでしょうか。
コールバックを使ってみてもダメでした。
js
1function fetchApi(func) {
2 // インクルードjs
3func();
4};
5var lazyload = function () {
6 // lazyload 読み込み
7};
8fetchApi(lazyload);
追記
js
1document.addEventListener('DOMContentLoaded', () => {
2 function lazyload(node) {
3 if ("loading" in HTMLImageElement.prototype) {
4 let images = node.querySelectorAll('img[loading="lazy"]');
5 let sources = node.querySelectorAll("source[data-srcset]");
6 // 省略
7 } else {
8 let script = document.createElement("script");
9 // 省略
10 }
11 }
12 lazyload(document);
13
14 if (document.getElementsByClassName("nav")[0] != null) {
15 fetch('/assets/include/nav.html')
16 .then(response => response.text())
17 .then(data => {
18 const parser = new DOMParser();
19 const html = parser.parseFromString(data, "text/html");
20 const p_elements = html.getElementsByClassName('nav')[0];
21 const file_area = document.getElementsByClassName("nav")[0];
22 file_area.innerHTML = p_elements.innerHTML;
23 }).then(node => {
24 lazyload(node)
25 });
26 }
27});
として、fetchの順番を守ったのですが、エラーが出てしまいました。
error
1TypeError: node is undefined
node が未設定となっているようです。
let images = node.querySelectorAll('img[loading="lazy"]'), のところです。
node に何を設定すればいいでしょうか。
補足情報（FW/ツールのバージョンなど）
Firefox 最新版、Safari 604.1
Q&A
自己解決
