【JS】素のJSでシンプルなlazyload（画像の遅延読み込み）を実装

2024年3月6日2024年5月30日

Kizineko（COPPY管理人）

URLをコピーしました！

目次（クリックでジャンプ）

素のJSだけでシンプルなlazyloadを実装する

CDNやlazyloadのプラグインを読み込むのが面倒でしたのでJSのみで実装しました。

ページ内リンク等にも対応（ページの高さ計算に支障なし）
lazyloadクラス&data-src属性を使うのみで簡単
少ないコードで実装可能
Webpやpictureタグにも対応

JavaScript(JS)

// 画面のスクロールを監視して、遅延読み込みを行う関数
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img.lazyload');

    // プレースホルダーの高さを設定
    lazyImages.forEach(image => {
        const tempImage = new Image();
        tempImage.src = image.dataset.src;

        tempImage.onload = function() {
            const width = tempImage.width;
            const height = tempImage.height;
            const aspectRatio = height / width;

            // 画像のアスペクト比に基づいて高さを設定
            image.style.height = `${image.clientWidth * aspectRatio}px`;
        };
    });

    function lazyLoadImages() {
        const windowHeight = window.innerHeight;

        lazyImages.forEach(image => {
            const rect = image.getBoundingClientRect();
            if (rect.top < windowHeight && rect.bottom > 0) {
                image.src = image.dataset.src;
                image.onload = function() {
                    image.classList.remove('lazyload');
                    image.classList.add('lazyloaded');
                    // 読み込み後に高さの自動設定を解除
                    image.style.height = 'auto';
                };
            }
        });
    }

    window.addEventListener('load', lazyLoadImages);
    window.addEventListener('scroll', lazyLoadImages);
    window.addEventListener('resize', lazyLoadImages);
});

HTML

//通常のjpgやpngの場合
<img class="lazyload" data-src="ここに画像URL" alt="">

//WebPの場合
<picture>
   <source class="lazyload" data-srcset="ここにWEBP画像URL" type="image/webp">
   <img class="lazyload" data-src="ここに画像URL" alt="">
</picture>

lazyloadさせたい要素は、「data-src属性へ画像パスを記述」＋「lazyloadクラスを付ける」をセットで行ってください。
トップビジュアルなどをlazyloadさせると、レイアウトシフト等の原因となりますので、あまり好ましくないと思います。

CSS

.lazyload {
  display: block;
  width: 100%;
  height: auto;
  background: #f0f0f0;
}
.lazyloaded {
  display: unset;
  width: inherit;
  height: inherit;
  background: none;
}

予め画像の高さ計算をただしく行う為のCSSです。出来るだけCSSファイルの上部へ配置してください。