遅延読み込み用IntersectionObserverの検出

IntersectionObserver検出

IntersectionObserver APIは、要素がビューポート（または別の要素）に入ったり出たりするのを監視する効率的な方法を提供します。高コストなスクロールイベントリスナーと手動のバウンディングレクト計算を排除します。

検出

const hasIntersectionObserver =
  typeof IntersectionObserver !== 'undefined';

基本的な使い方

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 要素が表示されている
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  },
  {
    root: null,        // ビューポート
    rootMargin: '100px', // 表示100px前に読み込み
    threshold: 0.1,    // 10%表示でコールバック発火
  }
);

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

パフォーマンスの利点

アプローチ	CPU コスト	精度
scroll + getBoundingClientRect	高い（毎フレーム）	手動
IntersectionObserver	低い（ブラウザ最適化）	自動

一般的なパターン

1. 画像の遅延読み込み: ビューポートに近づいた時のみ画像を読み込み
2. 無限スクロール: センチネル要素が表示された時により多くのコンテンツを読み込み
3. 広告インプレッション追跡: 広告が実際にユーザーに表示された時に報告
4. スティッキーヘッダー: 要素がスクロール閾値を通過した時の検出
5. エントランスアニメーション: 要素がスクロールインした時にCSSアニメーションをトリガー

ポリフィル

古いブラウザ向けに、公式W3Cポリフィルがnpmのintersection-observerで利用可能で、内部的にスクロールイベントを使用して同一のAPI動作を提供します。