在有些時候，我們在前端載入的圖片就很多，例如商城之類的網站，圖片就很多，那麼，我們一次性載入所有的圖片的肯定會影響效能，而且會佔用寬頻

　　為了解決以上的問題，就出現了懶載入方式來減輕載入的壓力，優先載入可視區域的內容，其他部分等進入可視區域再載入，從而提高效能

　　（vue專案的打包中，是把html、css、js進行打包，還有就是圖片的壓縮。但是打包時把js和css都分成了幾個部分，這樣就不至於一個css和js檔案非常大。也是提高效能的一種方式）

　　那麼下邊我們就來具體說一說這個圖片懶載入的原理以及實現：

這就是簡單的懶載入，就是在使用滾動條的時候，圖片才實現可視區域的載入

一.原理

　　一張圖片就是一個<img>標籤，瀏覽器是否發起請求是根據<img>的src屬性決定的，所以實現圖片的懶載入的關鍵就是，在圖片沒有進入視覺化區域時，先不給<img>的src屬性賦值，這樣瀏覽器就不會發送請求，等到圖片進入可視區域之後，再給src屬性進行賦值即可

二.懶載入的思路及實現

　　1.載入可視區域的圖片

　　2.判斷圖片是否需要載入

　　3.隱形載入圖片

　　4.替換真圖片

　　　　（1）載入當頁面顯示時就在可視區域的圖片

　　　　（2）那麼我們如何去判斷是否進入可視區域呢？ 我們先來看一下一個網頁的整體的區域的劃分

　　　　　　如上圖所示，讓在瀏覽器可視區域的圖片顯示，可視區域外的不顯示，所以當圖片距離頂部的距離top-height等於可視區域h和滾動區域高度s之和時說明圖片馬上就要進入可視區了，就是說當top-height<=s+h時，圖片在可視區。
　　　　　　這裡介紹下幾個API函式：
　　　　　　頁可見區域寬： document.body.clientWidth;
　　　　　　網頁可見區域高： document.body.clientHeight;
　　　　　　網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
　　　　　　網頁可見區域高： document.body.offsetHeight (包括邊線的寬);

　　　　程式碼實現如下：　　　　

// onload是等所有的資原始檔載入完畢以後再繫結事件
window.onload = function(){
    // 獲取圖片列表，即img標籤列表
    var imgs = document.querySelectorAll('img');

    // 獲取到瀏覽器頂部的距離
    function getTop(e){
        return e.offsetTop;
    }

    // 懶載入實現
    function lazyload(imgs){
        // 可視區域高度
        var h = window.innerHeight;
        //滾動區域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for(var i=0;i<imgs.length;i++){
            //圖片距離頂部的距離大於可視區域和滾動區域之和時懶載入
            if ((h+s)>getTop(imgs[i])) {
                // 真實情況是頁面開始有2秒空白，所以使用setTimeout定時2s
                (function(i){
                    setTimeout(function(){
                        // 不加立即執行函式i會等於9
                        // 隱形載入圖片或其他資源，
                        //建立一個臨時圖片，這個圖片在記憶體中不會到頁面上去。實現隱形載入
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute('data-src');//只會請求一次
                        // onload判斷圖片載入完畢，真是圖片載入完畢，再賦值給dom節點
                        temp.onload = function(){
                            // 獲取自定義屬性data-src，用真圖片替換假圖片
                            imgs[i].src = imgs[i].getAttribute('data-src')
                        }
                    },2000)
                })(i)
            }
        }
    }
    lazyload(imgs);

    // 滾屏函式
    window.onscroll =function(){
        lazyload(imgs);
    }
}

　　　　 這樣就實現了圖片的懶載入了

　　　　開始的時候三張圖片在可視區域，所以發起三次請求

　　　　隨著滑鼠的向下滾動，其餘圖片也逐漸顯示併發起請求

　　　　　　動態的效果如下：

　　一個簡單的圖片的懶載入就實現完成了