前端性能優化--圖片懶加載(lazyload image)

話說前頭：

上次寫了一篇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中引入echo.min.js，如:

<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.想實現點擊下一張輪播圖纔去加載那張圖片。 以上所說的這些還須要繼續研究研究，正在尋求一些好的方法。