jsでの画像の遅延読み込みの実装原理を詳しく解説

画像の遅延読み込みの利点:

ユーザー エクスペリエンスの向上;

コードの最適化;

http リクエストの削減;

サーバー側の負荷の軽減;

サーバーのオンデマンド読み込み;

画像の遅延読み込みの原則:

まず、画像の src を同じ画像に設定するか、設定せずに、img タグに特別な属性を設定します。たとえば、data-src は、画像の実際のプレビュー アドレスを保存するために使用されます。画像; 画像が可視領域に入らない場合、同じ画像を表示するか、画像を直接表示しない場合、この時点では http リクエストは発生しません 画像が可視領域に入ると、data-src の値が代入されますsrc にアクセスすると、http リクエストが送信されます。

Key: 画像が表示領域に入るかを決定します (キー機能)

ページの表示領域の幅: document.body.clientWidth;

Web ページの可視領域の高さ: document.body.clientHeight;

Web ページの可視領域の幅: document.body.offsetWidth (端の幅を含む);

Web ページ本文の全テキストの幅: document.body.scrollWidth;

Web ページ本文の全テキストの高さ: document.body.scrollHeight;

Webページがスクロールされる ページの高さ: document.body.scrollTop;

スクロールされる Web ページの左側: document.body.scrollLeft; テキスト部分が左: window.screenLeft;

画面解像度の高さ: window.screen.height;

画面解像度の幅: window.screen.width;

画面で利用可能な作業領域の高さ: window.screen.availHeight ;

offsetParent 要素の上部を基準とした現在の要素の距離: HTMLElement.offsetTop;

ブラウザ ウィンドウのビューポートの高さ (ピクセル単位): window.innerHeight; (If水平スクロール バーがあり、スクロール バーの高さも含まれます)

(推奨チュートリアル:

)

window.onload = () => { // 获取某节点与浏览器顶部的距离 function getTop(e) { if (!e) return return e.offsetTop } let imgs = document.getElementsByTagName('img') function lazyLoading(imgs) { // 可是区域高度 let innerHeight = window.innerHeight; // 滚动区域高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < imgs.length; i++) { // 图片距离顶部的距离大于可视区域和滚动区域之和时加载 if (scrollTop + innerHeight > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } lazyLoading(imgs) window.onscroll = () => { lazyLoading(imgs) } }

以上がjsでの画像の遅延読み込みの実装原理を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。