Intersection Observerを使った画像の遅延読み込みを実装してみる

Intersection Observerを使った遅延読み込みを実装してみます。

対応ブラウザ

対応ブラウザはこちら。
IE以外の主要なブラウザで使用できるようです。

サンプルコード

まずHTMLですが、遅延読み込み対象の画像にlazyを追加して、画像のパスはsrcではなくdata属性のdata-srcに設定する形にします。

<div><img class="lazy" src="" data-src="https://via.placeholder.com/300"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/400"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/500"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/600"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/700"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/800"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/900"></div>
<div><img class="lazy" src="" data-src="https://via.placeholder.com/1000"></div>

次にJavaScriptです。
Intersection Observerで.lazyを監視して、対象がビューポートに入ったタイミングでdata-srcのパスをsrcに設定するようにしています。

document.addEventListener("DOMContentLoaded", function() {

  // 遅延読み込みの画像(.lazy)を取得
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  // Intersection Observerに対応しているかどうか
  if("IntersectionObserver" in window) {
    // Intersection Observerのオブジェクトを生成
    var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        // 対象画像がビューポートに入った時
        if (entry.isIntersecting) {
          var lazyImage = entry.target;
          // 対象画像のsrcをdata-srcの内容に変更
          lazyImage.src = lazyImage.dataset.src;
          // 対象画像の.lazyを削除
          lazyImage.classList.remove("lazy");
          // 対象画像を監視から外す
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    // 遅延読み込みの各画像の監視を実行
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });

  // Intersection Observerに対応していない場合
  } else {
    // 対象画像のsrcをdata-srcの内容に変更
    for (var i = 0; i < lazyImages.length; i++) {
      lazyImages[i].src = lazyImages[i].dataset.src;
    }
  }
});

これで遅延読み込みの実装ができました。
画像の遅延読み込みのデモページ
Intersection Observerに対応していない場合は遅延読み込みしないようにしています。

GooglebotはIntersection Observerをサポートしているので、遅延読み込み対象の画像も認識されるようです。