フロントエンドは画像を遅延ロードする方法を知っている必要があります（3つの方法）

1. 遅延読み込みとは何ですか?

多数の画像を表示する Web ページにアクセスすると、多くの場合、画像の数が多すぎるために読み込み速度が遅くなります。img 画像の数が多いと、ページのレンダリングがブロックされます。すべての画像とページを読み込むのに多大な労力がかかる頃には、ユーザーはすでに離脱してしまいます。一方、ユーザーが Web ページの最初の部分だけを表示して離脱した場合、読み込まれているものの Web ページの下部にあるためにビューポート領域に表示されない画像が多く存在し、サーバーの負荷が大幅に増加しますが、ユーザーにはそれらの画像が表示されないため、パフォーマンスが浪費されます。

上記の問題を解決するには、画像の遅延読み込みを導入する必要があります。遅延読み込みは実は非常に理解しやすいです。重要なポイントは「遅延」という言葉です。ユーザーが対応する表示領域をスクロールすると、表示領域内に画像がある場合は、その画像が読み込まれます。表示領域外にある読み込まれていない画像は、最初に読み込まれません。ユーザーが表示領域をスクロールしてそれらの画像まで移動すると、その画像が読み込まれます。それ以外の場合は、まったく読み込まれません。これにより、Web ページのレンダリングのパフォーマンスが大幅に向上し、不要な無駄が削減されます。

2. 遅延読み込みを実装する🌄:

まず、多数の画像を含む Web ページをシミュレートするための基本的な HTML ページを定義します。たとえば、8 つの img タグを使用してシミュレートし、いくつかの基本的な CSS スタイルを定義します。コードと初期効果は次のとおりです。

html:

    <img src="img/1.jpg" alt="xxx" />
    <img src="img/2.jpg" alt="xxx" />
    <img src="img/3.jpg" alt="xxx" />
    <img src="img/4.jpg" alt="xxx" />
    <img src="img/5.jpg" alt="xxx" />
    <img src="img/6.jpg" alt="xxx" />
    <img src="img/7.jpg" alt="xxx" />
    <img src="img/8.jpg" alt="xxx" />

CS: ...

 * {
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
      }
      画像 {
        幅: 500ピクセル;
        高さ: 300px;
        オブジェクトフィット: カバー;
        マージン: 20px;
      }
      体 {
        ディスプレイ: フレックス;
        flex-wrap: ラップ;
        コンテンツの均等配置: スペースを均等に;
      }

初期効果は次のようになります。このページを実行すると、右側のコンソールで 8 つの画像すべてが読み込まれ、レンダリングされていることがわかります。

以下は、JavaScript を使用して遅延読み込みを実装する 3 つの方法です。原則として、画像が表示領域に表示されるかどうかを判断し、画像に src 属性を割り当てます。

2.1 最初の方法:

まず、各 img タグを変更し、HTML が提供する data 属性を使用してカスタム データを埋め込みます。このカスタム データには、このタグの元の画像アドレスを保存します。同時に、すべての画像の src 属性を表すために同じ画像を使用します。この画像は通常、「読み込み中」という単語を表示する画像になります。複数の img タグ src が同じ画像を参照する場合、その画像は複数回ロードされるのではなく、一度だけロードされることに注意してください。そのため、以下の各画像 src に同じ画像を定義します。

    <img data-src="img/1.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/2.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/3.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/4.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/5.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/6.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/7.jpg" src="img/0.png" alt="xxx" />
    <img data-src="img/8.jpg" src="img/0.png" alt="xxx" />

ページ効果は次のとおりです。

次に、スクロール バーをスクロールしたときに画像が表示領域に表示される場合は、JavaScript を使用して画像を読み込みます。画像を読み込むということは、実際には、元のアドレスを img タグの src 属性に割り当てることを意味し、その後、画像の読み込みとレンダリングが要求されます。

 //すべての img タグを取得します。var images = document.getElementsByTagName("img");

 window.addEventListener("スクロール", (e) => {
    //スクロール イベントが発生したら、エルゴディック イベント ergodic() を呼び出します。
  });
  関数エルゴディック() {
    // 各画像を走査します for (let i of images) {
      //現在の画像が表示領域内にあるかどうかを判断します if (i.offsetTop <= window.innerHeight + window.scrollY) {
          //カスタム data-src 属性の値を取得します。let trueSrc = i.getAttribute("data-src");
          // 画像の src 属性に値を割り当てます i.setAttribute("src", trueSrc);
      }
    }
  }
  //スクロール イベントが発生しない場合でも、ergodic() を 1 回実行する必要があります。

このうち、offsetTop は要素の上端からの距離、window.innerHeight は現在のウィンドウの高さ、window.scrollY はスクロール距離です。i.offsetTop <= window.innerHeight + window.scrollY の場合、画像がウィンドウの表示領域内にあることは簡単にわかります。

効果は次のようになります。右側のコンソールを観察して、スクロール時にのみ画像が読み込まれることを確認します。

2.2 2番目の方法:

2 番目の方法は実際には 1 番目の方法と似ていますが、画像が可視領域内にあるかどうかを計算する方法が異なり、繰り返し部分が省略されています。

  window.addEventListener("スクロール", (e) => {
        エルゴード();
      });
      関数エルゴディック() {
        for (let i of images) {
          //計算方法は最初の方法とは異なります if (i.getBoundingClientRect().top < window.innerHeight) {
            trueSrc = i.getAttribute("data-src"); とします。
            i.setAttribute("src", trueSrc);
          }
        }
      }
      エルゴード();

このうち、getBoundingClientRect().top はウィンドウに対する要素の相対的な位置、window.innerHeight は現在のウィンドウの高さです。ウィンドウに対する要素の相対的な位置が現在のウィンドウの高さより小さい場合、当然ウィンドウの表示領域内にあります。

効果は同じです:

2.3 3番目の方法（最適）:

実際、上記 2 つの方法では、大まかに遅延読み込みを実現していますが、どちらもスクロール イベントが発生すると、画像が可視領域内にあるかどうかを判断するためのループと判定操作が大量に発生するという欠点があります。これは明らかに良い考えではないので、解決策はあるのでしょうか?ここでは、ブラウザによってネイティブに提供されるコンストラクターであるIntersection Observer と呼ばれるオブザーバー インターフェイスを紹介します。これを使用すると、ループと判断を大幅に削減できます。もちろん相性があまり良くない場合もあるので、状況に応じて使い分けてください。

Intersection Observer とは何ですか?このコンストラクターの目的は、表示されているウィンドウとターゲット要素間の交差領域を監視することです。簡単に言うと、これを使用して写真を観察する場合、表示ウィンドウに写真が表示されたり消えたりすると、特別なコールバック関数を認識して実行できます。このコールバック関数を使用して操作を実装します。この概念は退屈で理解しにくいですが、次の例を見てください。

1. IntersectionObserver はブラウザによってネイティブに提供されるコンストラクターなので、まず新しいインスタンスを作成します。

 const オブザーバー = 新しい IntersectionObserver(コールバック);

これにはコールバック関数であるパラメータ callback があります。これは、ターゲット要素が表示されているときに 1 回トリガーされ、ターゲット要素が非表示になっているときに再度トリガーされます。

2. オブザーバー プロパティを使用して、各画像にオブザーバーをバインドします。

for (let i of images) {
        オブザーバー.observe(i);
      }

3. 上記から、各画像が表示されているときと非表示になっているときにコールバック関数がトリガーされることがわかります。同時に、コールバック関数にはパラメータエントリもあります。コールバック関数を実行して、それが何であるかを確認できます。

 関数コールバック(エントリ) {
      console.log(エントリ)
      } 

画像が表示・非表示になるたびにコールバック関数が呼び出され、パラメータエントリの内容が出力されていることがわかります。実際、entries は配列であり、その配列要素はステータスが変更されてイベントをトリガーしたターゲット要素です。 isIntersecting プロパティは、ターゲット要素がビューポートに表示されている場合は true、表示されていない場合は false になります。この属性を使用できます。 true の場合、このイベントをトリガーする画像の src 属性値を data-src に設定し、読み込みを開始します。

関数コールバック(エントリ) {
        for (let i of エントリ) {
          交差している場合
              img = i.target とします。
              trueSrc = img.getAttribute("data-src"); とします。
              img.setAttribute("src", trueSrc);
          }
        } 
      }

ターゲット イベント属性は、イベントをトリガーした要素を返します。現在、スクロールバックすると、画像はしばらく表示され、その後しばらく非表示になり、コールバック関数がトリガーされるため、特定の画像が読み込まれたら、そのオブザーバーを停止する必要があります。 unobserve 属性を使用して停止できます。

  関数コールバック(エントリ) {
    for (let i of エントリ) {
      交差している場合
          img = i.target; とします。
          trueSrc = img.getAttribute("data-src"); とします。
          img.setAttribute("src", trueSrc);
          // 観察を終了します observer.unobserve(img);
      }
    } 
  }

完全なコード:

 var 画像 = document.getElementsByTagName("img");
   関数コールバック(エントリ) {
    for (let i of エントリ) {
      交差している場合
          img = i.target; とします。
          trueSrc = img.getAttribute("data-src"); とします。
          img.setAttribute("src", trueSrc);
          オブザーバーは画像を監視しません。
      }
    } 
  }
      const オブザーバー = 新しい IntersectionObserver(コールバック);
      for (let i of images) {
        オブザーバー.observe(i);
      }

効果は次のようになり、遅延読み込みが実現されます。

3. 要約:

上記は画像の遅延読み込みの実装に関するものです。 ✨一般的に、多数の画像を含む一部の Web ページでは、ページのレンダリング フェーズ中にすべての画像が読み込まれると、ページのレンダリングがブロックされます。画像の遅延読み込みの問題を解決するために、ユーザーは対応する表示領域をスクロールし、表示領域に画像がある場合はその画像が読み込まれます。その核となるのは、画像の実際のアクセス アドレスを格納するために、画像にカスタム属性 data-src を定義することです。画像が可視領域に表示されると、data-src の値が src 属性に割り当てられ、この時点で画像が読み込まれます。画像の位置はいくつかの共通属性によって決定できるだけでなく、消費を抑えて遅延読み込みを実現するために IntersectionObserver オブザーバー インターフェイスも導入されています。

以上で、フロントエンドに必須の画像の遅延読み込み（3つの方法）についての記事は終了です。画像の遅延読み込みに関するその他の関連記事については、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。