前提・実現したいこと
動的に追加した要素について、画像の遅延読み込みを 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
まだ回答がついていません
会員登録して回答してみよう