【JavaScript】Intersection Observerを使った画像の遅延読み込み方法

ウェブサイトのパフォーマンスを向上させるために、画像の遅延読み込み（Lazy Loading）は非常に有効なテクニックです。この記事では、Intersection Observer APIを使用して、画像の遅延読み込みを実装する方法を詳しく解説します。

遅延読み込みとは？

遅延読み込みとは、ウェブページが読み込まれる際に、すべての画像を一度に読み込むのではなく、ユーザーがスクロールして画像がビューポート（画面の表示領域）に入ったときにのみ、その画像を読み込む技術です。これにより、ページの初期ロードが高速化され、ユーザーのデータ使用量が削減されます。

Intersection Observerとは？

Intersection Observerは、要素がビューポートに表示されているか、またはその表示状況が変化したかどうかを監視するためのAPIです。これを活用することで、画像の遅延読み込みを効果的に実装することができます。

HTML

まず、遅延読み込みを行いたい画像要素にdata-src属性を追加します。この属性に、画像の本当のURLを設定します。また、src属性にはプレースホルダー画像を設定しておきます。

<img class="lazy-load" data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="Lazy Loaded Image">

CSSの設定

次に、プレースホルダー画像が表示されるように、CSSでスタイルを設定します。また、画像が読み込まれた際のアニメーションも設定します。

img.lazy-load {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.lazy-load.loaded {
  opacity: 1;
}

JavaScript

最後に、Intersection Observerを使って、画像がビューポートに入ったときにdata-src属性の値をsrc属性に設定するスクリプトを作成します。

document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll("img.lazy-load");

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.getAttribute("data-src");
        img.onload = () => {
          img.classList.add("loaded");
        };
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach((image) => {
    imageObserver.observe(image);
  });
});

実装結果

このスクリプトを実装することで、ユーザーがページをスクロールして画像がビューポートに入るたびに、その画像が遅延読み込みされるようになります。これにより、初期ロードのパフォーマンスが向上し、ユーザー体験が向上します。

まとめ

Intersection Observerを利用した画像の遅延読み込みは、ウェブサイトのパフォーマンスを最適化する上で非常に効果的な技術です。シンプルな実装でありながら、ユーザーのデータ使用量を抑え、より快適な閲覧体験を提供できます。ぜひ、自分のプロジェクトで試してみてください。