首頁 >web前端 >js教程 >詳解js中圖片懶載入的實作原理

詳解js中圖片懶載入的實作原理

王林
王林轉載
2020-04-02 09:20:232553瀏覽

詳解js中圖片懶載入的實作原理

圖片懶載入優勢:

#增強用戶體驗;

優化程式碼;


# #減少http的請求;

減少伺服器端壓力;

伺服器的按需載入;

圖片懶載入原理:

#先將圖片的src設定為同一張圖片或不設置,同時為img標籤設定一個特殊屬性,例如:data-src用於存放圖片的真實預覽位址;若圖片未進入視覺區域時,展示同一張圖片或直接不展示圖片,此時就不會發生http請求,當圖片進入可視區域時,將data-src上的值賦給src,此時再發送http請求。

關鍵:判斷圖片是否進入到視覺區域(關鍵函數)

#頁可見區域寬:document.body.clientWidth; 

#網頁可見區域高: document.body.clientHeight; 

網頁可見區域寬: document.body.offsetWidth (包括邊線的寬); 

網頁可見區域高: document.body.offsetHeight (包括邊線的寬); 

網頁正文全文寬: document.body.scrollWidth; 

網頁正文全文高: document.body.scrollHeight; 

網頁被捲去的高: document.body.scrollTop; #網頁被捲去的左: document.body.scrollLeft; 

網頁正文部分上: window.screenTop; #網頁正文部分左: window.screenLeft; 

#螢幕解析度的高: window.screen.height; 

#螢幕解析度的寬: window.screen.width; 


#螢幕解析度的寬: window.screen.width; 

####螢幕可用工作區高度: window.screen.availHeight; ######目前元素相對於其offsetParent 元素的頂部的距離: HTMLElement.offsetTop; ######瀏覽器視窗的視窗(viewport)高度(以像素為單位): window.innerHeight;(如果有水平滾動條,也包括滾動條高度)######(推薦教程:###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>
###js部分######
window.onload = () => {
   // 获取某节点与浏览器顶部的距离
   function getTop(e) {
    if (!e) return
    return e.offsetTop
   }
   let imgs = document.getElementsByTagName(&#39;img&#39;)
   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中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除