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