【JavaScript】Lazyload（遅延読み込み）完全ガイド｜loading属性・IntersectionObserver・iframe対応・LCPへの影響まで解説

<!-- 画像 -->
<img
  src="large-photo.jpg"
  alt="説明テキスト"
  width="800"
  height="600"
  loading="lazy"
>

<!-- iframe（YouTube埋め込みなど） -->
<iframe
  src="https://www.youtube.com/embed/XXXXX"
  width="560"
  height="315"
  loading="lazy"
  allowfullscreen
></iframe>

<!-- NG: ファーストビューのメイン画像に lazy を付けると LCP が悪化 -->
<img
  src="hero.jpg"
  alt="ヒーロー画像"
  width="1920"
  height="1080"
  loading="lazy"
>

<!-- OK: ファーストビューのメイン画像は eager（またはデフォルト）+ fetchpriority="high" -->
<img
  src="hero.jpg"
  alt="ヒーロー画像"
  width="1920"
  height="1080"
  loading="eager"
  fetchpriority="high"
>

<!-- OK: スクロールしないと見えない画像には lazy -->
<img
  src="gallery-1.jpg"
  alt="ギャラリー画像"
  width="600"
  height="400"
  loading="lazy"
>

<!-- src の代わりに data-src に実際の画像URLを書く -->
<!-- src には小さなプレースホルダーか省略 -->
<img
  data-src="large-photo.jpg"
  alt="遅延読み込み画像"
  width="800"
  height="600"
  class="lazy-img"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
>

/**
 * IntersectionObserver で data-src を src に差し替えて遅延読み込みする
 */
function initLazyImages() {
  const images = document.querySelectorAll('img[data-src]');

  if (!images.length) return;

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;

      const img = entry.target;
      img.src = img.dataset.src;            // data-src を src に移す
      img.removeAttribute('data-src');      // 処理済みマーク
      img.classList.add('lazy-loaded');     // ロード後のスタイル用

      obs.unobserve(img);                   // 読み込んだら監視解除
    });
  }, {
    rootMargin: '200px 0px',  // ビューポートより200px手前で発火
    threshold:  0,
  });

  images.forEach(img => observer.observe(img));
}

document.addEventListener('DOMContentLoaded', initLazyImages);

/* 読み込み前はぼかして半透明 */
img[data-src] {
  filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* 読み込み後にフェードイン */
img.lazy-loaded {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img[data-src],
  img.lazy-loaded {
    transition: none;
  }
}

<!-- data-srcset に実際の値を書く -->
<img
  data-src="photo-800.jpg"
  data-srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="レスポンシブ画像"
  width="800"
  height="600"
  class="lazy-img"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
>

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;

    const img = entry.target;

    // srcset も差し替える
    if (img.dataset.srcset) {
      img.srcset = img.dataset.srcset;
      img.removeAttribute('data-srcset');
    }
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
    img.classList.add('lazy-loaded');

    obs.unobserve(img);
  });
}, { rootMargin: '200px 0px', threshold: 0 });

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

<!-- template 要素の中身はDOMにレンダリングされない -->
<div class="lazy-block" id="heavy-widget">
  <template>
    <!-- ここに重い埋め込みウィジェットや複雑なHTMLを書く -->
    <div class="widget">
      <iframe src="https://example.com/widget" width="300" height="250"></iframe>
    </div>
  </template>
</div>

function initLazyBlocks() {
  const blocks = document.querySelectorAll('.lazy-block');

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;

      const container = entry.target;
      const template  = container.querySelector('template');

      if (template) {
        // template の中身を複製してDOMに挿入
        container.appendChild(template.content.cloneNode(true));
        template.remove();
      }

      obs.unobserve(container);
    });
  }, { rootMargin: '300px 0px', threshold: 0 });

  blocks.forEach(block => observer.observe(block));
}

document.addEventListener('DOMContentLoaded', initLazyBlocks);

const observer = new IntersectionObserver(callback, {
  // rootMargin: 監視領域をビューポートから拡張する余白（CSSのmarginと同じ形式）
  // "200px 0px" → ビューポートの上下200px外から監視開始
  // 正の値で「早めに発火」、負の値で「中心に入ったら発火」
  rootMargin: '200px 0px',

  // threshold: 対象要素のどれだけが見えたら発火するか（0〜1）
  // 0  → 1pxでも見えたら発火（最も早い）
  // 0.5 → 要素の50%が見えたら発火
  // 1  → 要素全体が見えたら発火
  threshold: 0,
});

/*
 * 用途別チューニング例:
 *
 * 画像の先読み（スクロール前に準備）
 *   rootMargin: '400px 0px',  threshold: 0
 *
 * アニメーション（要素が半分入ったら開始）
 *   rootMargin: '0px',  threshold: 0.5
 *
 * 無限スクロールの次ページ読み込み
 *   rootMargin: '100px 0px',  threshold: 0
 *
 * フッターの到達検知
 *   rootMargin: '0px',  threshold: 1
 */

class LazyLoader {
  #observer;

  /**
   * @param {object} opts
   * @param {string} opts.imageSelector  - 遅延画像のセレクタ（デフォルト: 'img[data-src]'）
   * @param {string} opts.blockSelector  - 遅延ブロックのセレクタ（デフォルト: '.lazy-block'）
   * @param {string} opts.rootMargin     - IntersectionObserver の rootMargin
   */
  constructor({
    imageSelector = 'img[data-src]',
    blockSelector = '.lazy-block',
    rootMargin    = '200px 0px',
  } = {}) {
    this.#observer = new IntersectionObserver(
      (entries, obs) => this.#handle(entries, obs),
      { rootMargin, threshold: 0 }
    );

    document.querySelectorAll(imageSelector)
      .forEach(el => this.#observer.observe(el));
    document.querySelectorAll(blockSelector)
      .forEach(el => this.#observer.observe(el));
  }

  #handle(entries, obs) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      const el = entry.target;

      if (el.tagName === 'IMG') {
        this.#loadImage(el);
      } else {
        this.#loadBlock(el);
      }

      obs.unobserve(el);
    });
  }

  #loadImage(img) {
    if (img.dataset.srcset) {
      img.srcset = img.dataset.srcset;
      img.removeAttribute('data-srcset');
    }
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
    img.classList.add('lazy-loaded');
  }

  #loadBlock(container) {
    const tpl = container.querySelector('template');
    if (tpl) {
      container.appendChild(tpl.content.cloneNode(true));
      tpl.remove();
    }
  }

  /** 動的に追加した要素を追加監視する */
  observe(el) {
    this.#observer.observe(el);
  }

  /** 監視を全て停止する */
  disconnect() {
    this.#observer.disconnect();
  }
}

// 使用例
document.addEventListener('DOMContentLoaded', () => {
  new LazyLoader({ rootMargin: '300px 0px' });
});