IntersectionObserver でオフスクリーンの画像を遅延読み込みする

<img src="load.gif" data-origsrc="/img/foot_logo.png"/>

<!-- polyfill を読み込む -->
<script src="/js/intersection-observer.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var io = new IntersectionObserver(
      function(entries) {
         // observe しているすべての要素は entries から取得できる
         entries.forEach(function(entry) {

            // intersectionRatio には、entry （要素）がどれだけビューに現れているかの
            // 割合が 0~1 の範囲で入る。
            // 0 だとまったく表示されていない。
            // 1 だとすべて表示されている
            if(entry.intersectionRatio == 0) { continue }; // 要素がビューに現れていないのでスキップ

            // entry.target から observe した要素を参照できる
            // `data-origsrc` の値を `src` にセットし、画像を読み込む
            entry.target.src = entry.target.dataset.origsrc;

            // 読み込み済みのは監視不要なので unobserve で observe 解除する
            this.unobserve(entry.target);
         });
      },
      {
         /** ↓デフォルト値のオプションをあえて書いてます **/
         // ビューポートとする要素。指定しなければ viewport
         // ovserve する対象がここで指定したビューポートと交差したときに
         // コールバックが呼ばれる
         root: null,

         // root に対するマージン（root の範囲がこれにより拡大・縮小する）。css の`margin` のように指定する
         // パーセント単位を使いたいときは root を明示する。
         rootMargin: "0px 0px 0px 0px",

         // 監視対象がどれだけビューポートと交差したタイミングで
         // コールバックを呼ぶかを配列で指定する。
         // 例えば、`0, 0.25, 0.5` だと、要素がそれぞれ
         // 0%, 25%, 50% 表示されたタイミングでコールバックが呼ばれることになる
         threshold: [0],
      }
   );

  // このサンプルではすべての img タグを遅延ロードの対象としている
  var imgs = document.querySelectorAll('img');
  for(var i = 0;i < imgs.length;i++) {
    var img = imgs[i];

    // data-origsrc 属性のない要素はスキップ
    if(!img.dataset.origsrc) { continue; }

    // observe 対象の要素（target）を追加
    io.observe(img);
  }
})
</script>

<script src="/js/intersection-observer.min.js"></script>