前端優化–圖檔懶加載##

一、什麼事懶加載

懶加載技術(簡稱lazyload)是對網頁性能優化的一種方案。lazyload的核心是按需加載，避免網頁打開時加載過多資源，讓使用者等待太久，在适當的時候加載使用者需要的資源(這裡使用者需要的資源指該資源呈現在浏覽器可視區域)。這裡我們主要是對img标簽使用懶加載技術，使用jquery的query.lazyload.js庫實作。

通俗的講就是：當通路一個頁面的時候，先把img元素或是其他元素的背景圖檔路徑替換成一張大小為1*1px圖檔的路徑（這樣就隻需請求一次），隻有當圖檔出現在浏覽器的可視區域内時，才設定圖檔真正的路徑，讓圖檔顯示出來。這就是圖檔懶加載。

二、為何要是用懶加載技術？

比如一個頁面中有很多圖檔，如淘寶、京東首頁等等，如果一上來就發送這麼多請求，頁面加載就會很漫長，如果js檔案都放在了文檔的底部，恰巧頁面的頭部又依賴這個js檔案，那就不好辦了。更為要命的是：一上來就發送百八十個請求，伺服器可能就吃不消了（又不是隻有一兩個人在通路這個頁面）。是以優點就很明顯了：不僅可以減輕伺服器的壓力，而且可以讓加載好的頁面更快地呈現在使用者面前（使用者體驗好）。

三、如何實作

主要有以下2個關鍵點：

1、頁面中的img元素，如果沒有src屬性，浏覽器就不會送出請求去下載下傳圖檔（也就沒有請求咯，也就提高性能咯），一旦通過javascript設定了圖檔路徑，浏覽器才會送請求。有點按需配置設定的意思，你不想看，就不給你看，你想看了就給你看 　2、怎麼擷取真正的路徑，這個簡單，現在真正的路徑存在元素的“data-original（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；

第一步，引入懶加載所需的js檔案
<script src="jquery.lazyload.js"></script>
第二步，img标簽的屬性如下：
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
第三步，在對應的js檔案中，對img标簽調用如下imgLazyLoad方法.
           

四、懶加載方法

function imgLazyLoad(param,$dom){  
   	  var placeholder = baseUrl + '/lar-ui/imgs/placeholder/0.png';   
   	  var extendParam = $.extend({effect: 'fadeIn',placeholder: placeholder}, param);    
   	  if($dom){      
   	    $($dom).find('img.lazy').lazyload(extendParam);   
   	  }else{       
   	   $('img.lazy').lazyload(extendParam);    
   	   }
   }
           

參數說明：

1)$dom為實施懶加載的dom元素，param對象中的參數含義如下　　

2)Placeholder : “img/grey.gif”, //用圖檔提前占位。　　

3)threshold : 200, //提前開始加載。值為數字，代表的頁面高度。目的在于加載圖檔時可以做到不讓使用者察覺。　　

4)event : “click”, //事件觸發時才加載，值有click,mouseover,foobar等，可以像這樣觸發：find(‘img.lazy’).trigger(‘foobar’)。　　

5)effect : “fadeIn” ,//載入使用何種效果,effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等。　　

6)container: $("#container")//容器内水準滾動效果,滾動時按需加載。Lazyload預設是在拉動浏覽器滾動條的時候生效，這個參數還可以讓你在拉動某個DIV的滾動條時依次加載其中圖檔　　

7)failurelimit:圖檔排序混亂時,值為數字，lazyload預設在找到第一張不在可視區域裡的圖檔時則不在繼續加載，如果當HTML容器裡混亂的時候有可能會出現可見區域内的圖檔加載不出來的情況，failurelimit意在加載N張可見區域外的圖檔，避免出現這個問題。

五、方法調用

imgLazyLoad(	
	{effect:'show'},//載入時的效果
	$('#myCarousel')//擷取需要實施懶加載的DOM元素
)