ホームページ > 記事 > ウェブフロントエンド > JS に基づいて画像の遅延読み込みを実装するチュートリアルの例
画像の遅延読み込みも比較的一般的なパフォーマンス最適化方法です。この記事では主にネイティブ JS を使用した画像の遅延読み込みの例を紹介します。詳細なコードはここにまとめられていますので、ご参照ください。
画像の遅延読み込みも比較的一般的なパフォーマンス最適化手法であり、最近では Vue を使用してニュース リスト クライアントを作成する際にも使用されています。実装原理とコードの一部を簡単に紹介します。実装原理
ページをロードするとき、画像は常に主なトラフィックソースであり、base64、スプライト画像など、画像のパフォーマンス方法は多数あります。遅延読み込みもその 1 つです。主な原理は、最初の画面上の画像の src をデフォルト値に変換し、ウィンドウのスクロールを監視し、画像がウィンドウに表示されるときに実際の画像アドレスを与えることです。最初の画面の読み込み速度を調整し、オンデマンドで画像を読み込みます。特定のコード
<image src='./../assets/default.png' :src='item.allPics' class='lazyloadimg'>次に、スクロールを監視するには、window.onscroll を使用します。ただし、注意すべき点は、スクロールとサイズ変更は Windows と同様であり、mousemove などのイベントが頻繁にトリガーされることです。セクションを使用するのが最適です。トリガー周波数を制御するスロットルまたはデバウンス機能。アンダースコアとロダッシュのカプセル化方法は2つありますので、ここでは詳しく紹介しません。
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('src'); img[i].className = img[i].className.replace('lazyloadimg','') } } }
結論
1. ページがホーム画面から離れてスクロールします (このとき、先頭に戻るボタンを表示できます): document.body.scrollTop > window.innerHeight
2. ページが一番下までスクロールしました (この時点で、より多くのコンテンツを取得するようにインターフェイスを調整できます): window.scrollY + window.body.offsetHeight >
上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんが Script Home をサポートしてくれることを願っています。
以上がJS に基づいて画像の遅延読み込みを実装するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。