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水平スクロール バーがあり、スクロール バーの高さも含まれます)

(推奨チュートリアル:

js チュートリアル

)

コード実装:

html パート

<div>
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
  <img src="/static/imghwm/default1.png"  data-src="./img/1.jpg"  class="lazy"   data- alt="">
 </div>

js パート

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(&#39;data-src&#39;)
     }
    }
   }
   lazyLoading(imgs)
   window.onscroll = () => {
    lazyLoading(imgs)
   }
  }

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