話說前頭：

上次寫了一篇webpack的學習心得，webpack能做到提升前端的效能，其模組打包最終生成一個或少量的檔案能夠減少對服務端的請求。除此之外，本次的圖片懶載入（當然不僅限於圖片，還可以有視訊，flash等）也是一種優化前端效能的方式。使用懶載入可以想要看圖片時才載入圖片，而不是一次性載入所有的圖片，從而在一定程度從減少服務端的請求。

懶載入介紹：

• 通俗介紹：懶載入怎麼個懶法，就是你不想看就不給你看，我也懶得加載出來，懶得去請求。通俗的說就是你不要就不給你，怎麼地。舉個栗子，比如在進入某個頁面的時候，它會有許多的圖片，有些圖片可能在下面，當我們點進頁面但沒有滑動下去或沒看完整個頁面，那麼下面的圖片就會"沒用"，載入了也白載入，而且還降低了網頁的載入速度。因此用懶載入能當滾動到可視區域時才載入當前的圖片。

• 原理：圖片的載入是由src的值引起，當對src賦值時瀏覽器就會請求圖片資源，基於這個，可以利用html5屬性data-XXX來儲存圖片的路徑，當我們需要載入圖片的時候才將data-xxx的值賦予src，醬就能實現圖片的按需載入，也就是懶載入了。

• 優點：提高前端效能，圖片在需要的時候才載入，減輕服務的負擔，提高頁面的載入速度，能夠減少頻寬。

懶載入實現方式:

1.使用jquery-lazyload.js，jQuery的外掛用於懶載入使用，需要依賴jQuery。

jquery-lazyload.js演示

2.使用echo.js：專門用於實現懶載入。

echo.js演示

-- jquery-lazyload.js 實現方式：

1.引入：在HTML中引入jQuery和jQuery-lazyload，如：

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

2.圖片中不使用src屬性，因為使用src屬性後就會預設傳送請求請求圖片，使用data-original代替如：

<img class="lazy" data-original="images/p1.jpg"
 
 style="margin-top:500px" height="300">

3.新增jQuery程式碼：

<script type="text/javascript">
    $(function() {
        $("img.lazy").lazyload();
    })
</script>

-- jquery-lazyload.js的引數:

1.threshold :設定Threshold引數來實現滾到距離其xx px時就載入。如：

$(function() {
     $("img.lazy").lazyload({
        threshold :100
    });
})

2.placeholder :為某一圖片路徑.此圖片用來佔據將要載入的圖片的位置,待圖片載入時,佔位圖則會隱藏,比如放一些等待載入的圖片來優化使用者體驗效果。

$(function() {
     $("img.lazy").lazyload({
        placeholder: "images/loading.gif"
    });
})

3.event ：觸發定義的事件時，圖片才開始載入（此處click代表點選圖片才開始載入，還有mouseover，sporty,foobar(…)）

$(function(){
      $("img.lazy").lazyload({
            event : "click"
      });
})

4.effects ：圖片顯示時的效果，預設是show。

$(function(){
      $("img.lazy").lazyload({
          effects:"fadeIn"
      });
})

5.container :值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,這個引數可以讓你在拉動某DIV的滾動條時依次載入其中的圖片

 $(function(){
        $("img.lazy").lazyload({
            container: $("#container") 
        });
 })

6.failure_limit ：一般用於當頁面中圖片不連續時使用，滾動頁面的時候, Lazy Load 會迴圈為載入的圖片. 在迴圈中檢測圖片是否在可視區域內，外掛預設情況下在找到第一張不在可見區域的圖片時停止迴圈。如：

 $(function(){
        $("img.lazy").lazyload({
           failure_limit : 20
    });
})

這裡設為20表示外掛找到 20 個不在可見區域的圖片時才停止搜尋。

7.skip_invisible :為了提升效能，外掛預設忽略隱藏的圖片；如果想要載入隱藏圖片.設定skip_invisible為false;

  $(function(){
        $("img.lazy").lazyload({ 
            skip_invisible : false
    });
})

-- echojs實現方式：

• 引入：在HTML中引入jQuery和jQuery-lazyload，如:

  <script type="text/javascript" src="js/echo.min.js"></script>

• 圖片中的src使用data-echo代替如:

  <img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">

• 新增js程式碼:

  echo.init({
  //離可視區域多少畫素的圖片可以被載入
        offset: 500, 
   //圖片延時多少毫秒載入
     　throttle: 1000
  });

-- echo只有兩個可選引數：

• offset：離可視區域多少畫素的圖片可以被載入
• throttle：圖片延時多少毫秒載入

最後說幾句:

• 上述的懶載入實現方式都是人家實現好的，畢竟人家已經做好就不去重複造輪子，直接用人家會比較放心，因為大家都在用。
• jquery-lazyload外掛的功能比較多，echojs雖然功能少但也夠用，而且體積小，所以根據需求對兩者取捨。
• 別人做好但也要去了解人家的如何去做，原理有了，我自己也嘗試去做，寫得還不是很好。這兩個方式對於一些頁面圖片懶載入已經夠用，但是對於輪播圖的載入還是不夠理想。
  
• 遇到的一些問題:
  1.在滾動輪播圖片中，首次不能載入還沒有滾出來的圖片。
  2.想實現點選下一張輪播圖才去載入那張圖片。
  以上所說的這些還需要繼續研究研究，正在尋求一些好的方法。