JavaScriptを使った画像の遅延読み込み方法の紹介

画像の遅延読み込み (画像の遅延読み込みや遅延読み込みとも呼ばれます) とは、ユーザーが画像を使用する必要があるときに画像を読み込むことを意味し、これによりリクエストが削減され、帯域幅が節約され、ページの読み込み速度が向上します。この記事を通じて画像の遅延読み込みの実装方法を共有しましょう

定義

画像の遅延読み込みは遅延読み込みとも呼ばれます。画像の遅延読み込み。つまり、ユーザーが画像を使用する必要があるときに画像を読み込みます。これにより、リクエストが減り、帯域幅が節約され、ページの読み込み速度が向上し、サーバーの負荷が相対的に軽減されます。

遅延読み込みは、ユーザー エクスペリエンスを向上させ、一度に大量のデータを読み込むことを防ぎ、代わりにユーザーのニーズに基づいてリソースを要求します。

実装の難しさは、特定の画像がユーザーが必要とするリソースであるかどうかを判断することです。ブラウザでは、ユーザーは視覚領域でリソースを必要とするため、画像にリソースがあるかどうかを判断するだけで済みます。可視領域で画像が表示されている場合、画像の実際のアドレスを取得して画像に割り当てます (画像の幅と高さを指定する必要があり、パディングを使用できます)。 ）。 可視領域に存在するかどうかの判定

ブラウザのビューポートの高さ

読み込むリソースとビューポートの上部との距離

上記2点で画像が可視領域にあるかどうかを判定できます。

rreee

pictureの実際のアドレスを取得します

rreee

の実際​​のアドレスをpicture

var nodes = document.querySelectorAll('img[src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log(&#39;show&#39;)
}

fullcode

rreeeに割り当てます

以上がJavaScriptを使った画像の遅延読み込み方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。