NEW ARTICLE
Railsのエラー『Devise::OmniauthCallbacksController#failure』の解決方法
  1. HOME
  2. javascript
  3. JavaScriptのIntersectionObserver APIで効率的な画像遅延読み込みを実現

JavaScriptのIntersectionObserver APIで効率的な画像遅延読み込みを実現

JavaScriptのIntersectionObserver APIで効率的な画像遅延読み込みを実現

Webパフォーマンスを向上させるために、画像の遅延読み込み（Lazy Loading）は欠かせません。IntersectionObserver APIを利用することで、簡潔かつ効率的に画像遅延読み込みを実装できます。本記事では、実装の詳細と応用例を解説します。

目次

遅延読み込みの重要性

遅延読み込みは、ユーザーが実際に閲覧するコンテンツだけをロードすることで、初期ロード時間を短縮し、リソース消費を最適化します。

IntersectionObserver APIとは

IntersectionObserver APIは、要素がビューポート内に入ったり出たりすることを監視するためのネイティブなJavaScript APIです。

基本的なIntersectionObserverの構造

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('要素がビューポート内に入りました');
    }
  });
});

const target = document.querySelector('.target');
observer.observe(target);

画像遅延読み込みのためのHTML構造

<img class="lazy" data-src="example.jpg" alt="遅延読み込み画像">

画像遅延読み込みのJavaScript実装

const lazyImages = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

オプション設定で動作を調整

IntersectionObserverは、root、rootMargin、thresholdのオプションで動作を細かく制御できます。

const options = {
  root: null, // ビューポートを使用
  rootMargin: '0px 0px 50px 0px', // マージン設定
  threshold: 0.1 // 要素が10%見えたときに発火
};

const observer = new IntersectionObserver(callback, options);

遅延読み込み時のプレースホルダー画像

遅延読み込み中にプレースホルダーを表示すると、UXを向上させることができます。

<img class="lazy" data-src="example.jpg" src="placeholder.jpg" alt="画像">

遅延読み込みのスケーラビリティ

大量の画像に対応するために、Observerを効率的に管理する方法を考慮します。

他の要素の遅延読み込みに適用

画像だけでなく、動画、iframe、またはセクション全体に遅延読み込みを適用することが可能です。

エラー処理の追加

画像読み込みエラー時にフォールバックを用意します。

img.onerror = () => {
  img.src = 'fallback.jpg';
};

ポリフィルの利用

古いブラウザでの互換性を保つために、IntersectionObserverのポリフィルを利用できます。

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

画像遅延読み込みのパフォーマンス測定

実際のパフォーマンス向上を測定するために、LighthouseやWeb Vitalsを使用して評価します。

遅延読み込みのまとめ

IntersectionObserver APIを使えば、パフォーマンスに優れた画像遅延読み込みを簡単に実装できます。必要に応じてオプションやエラー処理を追加し、より良いUXを提供しましょう。