天天看點
傳回

圖檔的懶加載和預加載

一、懶加載

【1.1】什麼是懶加載？

懶加載也就是延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。當通路一個頁面的時候，先把img元素或是其他元素的背景圖檔路徑替換成一張大小為1*1px圖檔的路徑（這樣就隻需請求一次，俗稱占位圖），隻有當圖檔出現在浏覽器的可視區域内時，才設定圖檔正真的路徑，讓圖檔顯示出來。這就是圖檔懶加載。

【1.2】為什麼要懶加載？

當很多頁面，内容很豐富，頁面很長，圖檔較多的時候。比如說各種商城頁面。這些頁面圖檔數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載所有圖檔，等待時間很長，使用者難免會心生抱怨，這就嚴重影響使用者體驗。

【1.3】懶加載的原理

頁面中的img元素，如果沒有src屬性，浏覽器就不會送出請求去下載下傳圖檔，隻有通過javascript設定了圖檔路徑，浏覽器才會發送請求。懶加載的原理就是先在頁面中把所有的圖檔統一使用一張占位圖進行占位，把真正的路徑存在元素的“data-src”（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；

【1.4】懶加載的優點

頁面加載速度快、可以減輕伺服器的壓力、節約了流量，使用者體驗好

【1.5】懶加載實作方式

方法一：純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.

方法二：條件加載，符合某些條件，或觸發了某些事件才開始異步下載下傳。

方法三：可視區加載，即僅加載使用者可以看到的區域，這個主要由監控滾動條來實作，一般會在距使用者看到某圖檔前一定距離遍開始加載，這樣能保證使用者拉下時正好能看到圖檔。

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <title>Document</title>
  <style>
    .image-item {
      display: block;
      margin-bottom: 50px;
      /* 一定記得設定圖檔高度 */
      height: 200px; 
    }
  </style>
</head>

<body>
  <div class="wrap">
    <img class="image-item" src="" src="images/1.jpg" alt="" />
    <img class="image-item" src="" src="images/2.jpg" alt="" />
    <img class="image-item" src="" src="images/3.jpg" alt="" />
    <img class="image-item" src="" src="images/4.jpg" alt="" />
    <img class="image-item" src="" src="images/5.jpg" alt="" />
    <img class="image-item" src="" src="images/6.jpg" alt="" />
    <img class="image-item" src="" src="images/7.jpg" alt="" />
    <img class="image-item" src="" src="images/8.jpg" alt="" />
    <img class="image-item" src="" src="images/9.jpg" alt="" />
    <img class="image-item" src="" src="images/10.jpg" alt="" />
  </div>

  <script>
    // 首先獲得頁面當中所有的圖檔
    let img = document.getElementsByTagName("img");

    //存儲圖檔加裁到的位置，避免每次都從第一 張圖檔開始周遊
    let n = 0;

    //頁面載入完畢加載可視區域内的圖檔
    lazyload();

    //注冊滾動條滾動事件
    window.onscroll = lazyload;

    //監聽頁面滾動事件
    function lazyload() {

      //可見區域高度
      let seeHeight = document.documentElement.clientHeight;

      /*滾動條距離頂部高度
      * Chrome: document.body.scrollTop
      * FF: document.documentElement.scrollTop
      **/
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      for (let i = n; i < img.length; i++) {
        //  目前圖檔相對于頁面頂部的距離 <= 可視區域+滾動條距離距離頂部的距離
        if (img[i].offsetTop < seeHeight + scrollTop - 100) {
          //将img[i]的src設定 成img[i]的data-src
          if (img[i].getAttribute("src") == "") {
            img[i].src = img[i].getAttribute("data-src");
            n = i + 1;
          }
        }
      }
    }
  </script>
</body>

</html>

二、預加載

【2.1】什麼是預加載？

提前加載圖檔，當使用者需要檢視時可直接從本地緩存中渲染

【2.2】為什麼要預加載？

在網頁全部加載之前，對一些主要内容進行加載，以提供給使用者更好的體驗，減少等待的時間。否則，如果一個頁面的内容過于龐大，沒有使用預加載技術的頁面就會長時間的展現為一片空白，直到所有内容加載完畢。圖檔預先加載到浏覽器中，通路者便可順利地在你的網站上沖浪，并享受到極快的加載速度。這對圖檔畫廊及圖檔占據很大比例的網站來說十分有利，它保證了圖檔快速、無縫地釋出，也可幫助使用者在浏覽你網站内容時獲得更好的使用者體驗。

【2.3】預加載的優點

預加載可以說是犧牲伺服器前端性能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。

【2.4】預加載實作方式

方法一：CSS方式實作預加載，隐藏在css的background的url屬性裡面

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

方法二：JavaScript實作預加載，通過javascript的Image對象設定執行個體對象的src屬性實作圖檔的預加載

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下來可以使用圖檔了
        //do something here
    } else {
        img.onload = function() {
            //接下來可以使用圖檔了
            //do something here
        };
    }
}

三、懶加載和預加載的對比

兩者都是提高頁面性能有效的辦法，兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對伺服器前端有一定的緩解壓力作用，預加載則會增加伺服器前端壓力。

四、補充知識

【4.1】原生方法

document.body.clientWidth // body對象寬度
    document.body.clientHeight // body對象高度

    document.documentElement.clientWidth // 可見區域寬度
    document.documentElement.clientHeight // 可見區域高度

    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.availHeight // 螢幕可用工作區高度
    window.screen.availWidth // 螢幕可用工作區寬度
    
    scrollHeight // 擷取對象的滾動高度。   
    scrollLeft // 設定或擷取位于對象左邊界和視窗中目前可見内容的最左端之間的距離   
    scrollTop // 設定或擷取位于對象最頂端和視窗中可見内容的最頂端之間的距離   
    scrollWidth // 擷取對象的滾動寬度   
    offsetHeight // 擷取對象相對于版面或由父坐标offsetParent屬性指定的父坐标的高度   
    offsetLeft // 擷取對象相對于版面或由父坐标offsetParent屬性指定的父坐标的計算左側位置   
    offsetTop //  擷取對象相對于版面或由父坐标offsetTop屬性指定的父坐标的計算頂端位置   
    event.clientX // 相對文檔的水準座标   
    event.clientY // 相對文檔的垂直座标   
    event.offsetX // 相對容器的水準坐标   
    event.offsetY // 相對容器的垂直坐标   
    document.documentElement.scrollTop // 垂直方向滾動的值   
    event.clientX+document.documentElement.scrollTop // 相對文檔的水準座标+垂直方向滾動的量 
    
    // 螢幕可視視窗大小（相容）
    window.innerHeight // 标準浏覽器及IE9+ 
    document.documentElement.clientHeight // 标準浏覽器及低版本IE标準模式
    document.body.clientHeight // 低版本混雜模式

    // 浏覽器視窗頂部與文檔頂部之間的距離，也就是滾動條滾動的距離（相容）
    window.pagYoffset // 标準浏覽器及IE9+ 
    document.documentElement.scrollTop // 相容ie低版本的标準模式   
    document.body.scrollTop // 相容混雜模式

【4.2】jQuery方法

$(window).height() // 浏覽器時下視窗可視區域高度   
$(document).height()　// 浏覽器時下視窗文檔的高度   
$(document.body).height() // 浏覽器時下視窗文檔body的高度   
$(document.body).outerHeight(true) // 浏覽器時下視窗文檔body的總高度 包括border padding margin   
$(window).width() // 浏覽器時下視窗可視區域寬度   
$(document).width() // 浏覽器時下視窗文檔對于象寬度   
$(document.body).width() // 浏覽器時下視窗文檔body的高度   
$(document.body).outerWidth(true) // 浏覽器時下視窗文檔body的總寬度 包括border padding 
$(document).scrollTop(); //擷取滾動條到頂部的垂直高度
$(document).scrollLeft(); //擷取滾動條到左邊的垂直寬度

【4.3】直覺圖展示

圖檔的懶加載和預加載
文章每周持續更新，可以微信搜尋「 前端大集錦 」第一時間閱讀，回複【視訊】【書籍】領取200G視訊資料和30本PDF書籍資料
圖檔的懶加載和預加載
圖檔的懶加載和預加載

​

javascript 懶加載 預加載 性能優化
上一篇: php實作預加載和懶加載,前端項目分析：我是如何做圖檔優化的（預加載和懶加載）...
下一篇: 圖檔的預加載和懶加載

繼續閱讀