画像の遅延読み込みの利点:
ユーザー エクスペリエンスの向上;
コードの最適化;
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水平スクロール バーがあり、スクロール バーの高さも含まれます)
(推奨チュートリアル:
js チュートリアル)
コード実装: html パート<div> <img src="./img/1.jpg" data-src="./img/1.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/2.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/3.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/4.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/5.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/6.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/7.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/8.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/9.jpg" alt=""> <img src="./img/1.jpg" data-src="./img/10.jpg" alt=""> </div>
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 サイトの他の関連記事を参照してください。