前端優化之圖片延遲加載（lazyload.js）

　　要想縮短首屏加載時間，思路一般是減少http請求次數和降低每次的請求量。本文中使用現成的lazyload.js插件，文末會放出下載地址。

　　lazyload.js可以實現圖片分批次加載，不是一次性加載完畢再分批次展現。使用該插件有個注意的地方，圖片要加上寬高。因為默認圖是1像素的，所以如果沒有給圖片限制寬高，當滾動條滾動時會全部加載出來。

　　比如下面這段代碼，其中的圖片會一次性加載完成。

<img data-original="images/bg00001.jpg" src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00002.jpg" src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00003.jpg" src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00004.jpg" src="/js/grey.gif" border="0" /> 

　　如果加上寬高限制，則每次只會展示可見區域的圖片。具體顯示多少張，是根據窗口高度和圖片高度而定。

<img data-original="images/bg00001.jpg" height="600" src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00002.jpg" height="600"  src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00003.jpg" height="600"  src="/js/grey.gif" border="0" /> 
<img data-original="images/bg00004.jpg" height="600"  src="/js/grey.gif" border="0" /> 

　　從以上代碼可以看出，需要延遲加載的圖片需要使用data-original屬性，屬性值是真實的圖片地址，默認的src值使用1像素的圖片（grey.gif）

　　使用時需要先加載jqury.js，再加載lazyload.js，並且需要寫一段js代碼，具體代碼如下

<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.lazyload.js" ></script>
<script>
    $(function() {
        $("img").lazyload({
            effect : "fadeIn"
        });
    });
</script>

　　lazyload參數使用說明
　　
　　1、用圖片提前占位
　　
　　placeholder : "img/grey.gif",
　　
　　參數:placeholder,值為某一圖片路徑.此圖片用來占據將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏
　　
　　2、載入使用何種效果
　　
　　effect : "fadeIn",
　　
　　參數：effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
　　
　　3、提前開始加載
　　
　　threshold : 200,
　　
　　參數:threshold,值為數字,代表頁面高度.如設置為200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺.
　　
　　4、事件觸發時才加載
　　
　　event : "click",
　　
　　參數:event,值有click(點擊),mouseover(鼠標划過),sporty(運動的),foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試…
　　
　　5、對某容器中的圖片實現效果
　　
　　container: $("#container"),
　　
　　參數:container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
　　
　　6、圖片排序混亂時
　　
　　failurelimit : 10,
　　
　　參數:failurelimit,值為數字.lazyload默認在找到第一張不在可見區域里的圖片時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題
　　
　　這些都是在html中的<img>圖片延遲加載，其實背景圖片也可以延遲加載。背景圖片圖片延遲加載有一個更大的好處是，爬蟲爬取時無法爬取到圖片，節省了服務器資源。
　　
　　背景圖片延遲加載跟html中圖片延遲加載很相似

<div class="lazy" data-original="img/example.jpg" 
width="640" height="480"></div>

　　這樣，只有當這個div出現在可視視窗內時，背景圖才會加載顯示。

演示頁面下載（含lazyload.js插件）