JavaScriptを使用した画像の遅延読み込みの例

画像の遅延読み込みも比較的一般的なパフォーマンス最適化の方法です。この記事では主にネイティブ JS を使用した画像の遅延読み込みの例を紹介します。詳細なコードはここにまとめられていますので、参照してください。

画像の遅延読み込みも比較的一般的なパフォーマンス最適化手法であり、最近では Vue を使用してニュース リスト クライアントを作成する際にも使用されています。実装原理とコードの一部を簡単に紹介します。

実装原理

ページをロードするとき、画像は常に主なトラフィックソースであり、base64、スプライト画像など、画像のパフォーマンス方法は多数あります。遅延読み込みもその 1 つです。主な原理は、最初の画面上の画像の src をデフォルト値に変換し、ウィンドウのスクロールを監視し、画像がウィンドウに表示されるときに実際の画像アドレスを与えることです。最初の画面の読み込み速度を調整し、オンデマンドで画像を読み込みます。

特定のコード

まず、レンダリング時に、画像はデフォルト画像を参照し、実際のアドレスをdata-*属性に置きます。

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

その後、スクロールを監視するには、window.onscroll を使用するだけです。ただし、注意すべき点は、スクロールとサイズ変更は window と同様であり、頻繁にトリガーされる

イベント があることです。スロットルを使用するのが最善です。 (スロットル) または手ぶれ補正機能 (デバウンス) を使用してトリガー周波数を制御します。アンダースコアとロダッシュのカプセル化方法は2つありますので、ここでは詳しく紹介しません。

次のステップは、主に 3 つの高さに基づいて、画像がウィンドウに表示されるかどうかを判断することです: 1. 現在の本文が上からどのくらいスクロールしたか。 2. ウィンドウの高さ。 3. 現在の画像と上部の間の距離。具体的なコードは次のとおりです:

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

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