画像の遅延ロード


画像の遅延ロードを行うとき
Intersection Observer を使うやり方と
スクロールイベントを使うやり方があります。


Intersection Observer を使うやり方

  1. 対象を取得する
  2. Intersection Observer に対象セットして、監視する。
  3. ビューポートに入った対象は画像読み込み
  4. 画像を読み込んだ対象は、監視対象から外す。

スクロールイベントを使うやり方

  1. スクロールイベント(当然間引く)のたびに、対象を取得する。
  2. 各対象のスクロール位置から、ビューポートに入っているか判定する
  3. 入っていたら、画像の読みこみ
  4. 画像を読み込んだら、対象の class を remove して対象からはずす。

画像の読み込みの部分は、やることは同じで、
最初にimg要素の src にローディング画像を指定しておいて、dataset に、読み込ませたい本体のデータを指定しておきます。

< img class= " 遅延ロードクラス名 " src = " ローディング画像 " data-src = " 本体データ " >

この部分は、どちらでやっても同じです。
遅延ロードのタイミングの検出を、スクロールイベントを使うか、Intersection Observer を使うかという事です。


Intersection Observer はこんな感じ

ソース

スクロールイベントだとこんな感じ

ソース

♫ もどる ♫


うさみちゃんとクロラ様

Usamichan
Cafe