JavaScriptのLazyLoadのプログラム (画像の遅延読み込み)
LazyLoad (画像の遅延読み込み)は、パフォーマンスに大きく貢献するエフェクトです。
lazy-loadのJavaScriptプログラムの書き方を紹介します。
目次から読む
JavaScriptのLazyLoadのプログラム
HTMLでデフォルトで低解像度の軽い画像をCSSでブラーなどをかけて表示させておきます。 そして、スクロールされたらdata-src属性で設定した高解像度の画像を表示させます。HTML
<img
src="img/lazyimg1.jpg"
data-src="img/goodimg1.jpg"
alt="img1"
class="features__img lazy-img"
/>
<img
src="img/lazyimg2.jpg"
data-src="img/goodimg2.jpg"
alt="img2"
class="features__img lazy-img"
/>
<img
src="img/lazyimg3.jpg"
data-src="img/goodimg3.jpg"
alt="img3"
class="features__img lazy-img"
/>CSS
.lazy-img {
filter: blur(18px);
}JavaScript
//targetとなる要素のすべてのデータ属性を取得
const imgTargets = document.querySelectorAll('img[data-src]');
console.log(imgTargets);
//NodeList(3) [...lazy-img, ...lazy-img, ...lazy-img]
//コールバック関数を設定
const LoadImg = function (entries, observer) {
const [entry] = entries;
console.log(entry);
//Guard clause(Guard Clause ガード節,ガード条件)
if(!entry.target) return;
// srcとdata-srcを入れ替える
entry.target.src = entry.target.dataset.src;
//filterのblurを取り除く(loadを使う)
entry.target.addEventListener('load', function () {
entry.target.classList.remove('lazy-img');
});
//ovserveを止める。
observer.unobserve(entry.target);
};
//IntersectionObserverを設定
const imgObserver = new IntersectionObserver(LoadImg, {
root: null,
threshold: 0,
rootMargin: '200px', //早めに表示させるため。
});
//forEachでそれぞれのデータ属性を観測するように設定して、呼び出す
imgTargets.forEach(img => imgObserver.observe(img));