JS に基づいて画像の遅延読み込みを実装するチュートリアルの例-jsチュートリアル-php.cn

JS に基づいて画像の遅延読み込みを実装するチュートリアルの例

零下一度

リリース： 2017-06-15 13:25:15

オリジナル

1651 人が閲覧しました

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

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

実装原理

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

特定のコード

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

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

ログイン後にコピー

次に、スクロールを監視するには、window.onscroll を使用します。ただし、注意すべき点は、スクロールとサイズ変更は Windows と同様であり、mousemove などのイベントが頻繁にトリガーされることです。セクションを使用するのが最適です。トリガー周波数を制御するスロットルまたはデバウンス機能。アンダースコアとロダッシュのカプセル化方法は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(&#39;lazyloadimg&#39;);
  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;)
  }
  }
 }

ログイン後にコピー

結論

次回は手ぶれ補正のソースコードの実装を追加するかもしれません。最後に、2 つの一般的なスクロール判定が追加されます:

1. ページがホーム画面から離れてスクロールします (このとき、先頭に戻るボタンを表示できます): document.body.scrollTop > window.innerHeight 2. ページが一番下までスクロールしました (この時点で、より多くのコンテンツを取得するようにインターフェイスを調整できます): window.scrollY + window.body.offsetHeight >

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんが Script Home をサポートしてくれることを願っています。

以上がJS に基づいて画像の遅延読み込みを実装するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。