JavaScript: 画像の遅延読み込み

JavaScript: 画像の遅延読み込み

2024年1月29日
JavaScript

スクロールされた時に画像を読み込むJavaScriptです。

jQueryなどを使ったほうがスクリプト自体は簡単に組めますが、jQueryのライブラリの読み込み自体が遅いのでJavaScriptで書いたほうがページの読み込みスピードが早くなります。
jQueryもCDNなど利用したりすることでページの読み込みスピードを改善できたりもしますが、必要なものを必要な時だけ使えば良いわけですし、JavaScriptをたくさん使うわけでなければライブラリも不要かなと思ったりします。

JavaScript

HTMLには外部ファイルとして読み込みます。

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // IntersectionObserverがサポートされていない場合のフォールバック
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
        });
    }
});

HTML

スクロールしたら画像を読み込むのでviewportの設定は必要です。今どきはレスポンシブデザインが普通でしょうし、viewportを設定していないという事は殆ど無いでしょうが念のため。
また、imgにはclass=”lazy”を追加することと、画像のパスはsrcではなくdata-srcにする必要があります。

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>画像の遅延読み込み</title>
    <script src="js/lazyload.js"></script>
</head>
<body>
    <div>
        <img class="lazy" data-src="image/lazy.jpg" alt="" width="1920" height="1080" />
    </div>
    <!-- 他の遅延読み込み画像をここに追加 -->
</body>
</html>