前端優化之圖片延遲加載（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參數使用說明
　　
　　一、用圖片提早佔位
　　
　　placeholder : "img/grey.gif",
　　
　　參數:placeholder,值爲某一圖片路徑.此圖片用來佔據將要加載的圖片的位置,待圖片加載時,佔位圖則會隱藏
　　
　　二、載入使用何種效果
　　
　　effect : "fadeIn",
　　
　　參數：effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,經常使用fadeIn
　　
　　三、提早開始加載
　　
　　threshold : 200,
　　
　　參數:threshold,值爲數字,表明頁面高度.如設置爲200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,能夠作到不讓用戶察覺.
　　
　　四、事件觸發時才加載
　　
　　event : "click",
　　
　　參數:event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).能夠實現鼠標莫過或點擊圖片纔開始加載,後兩個值未測試…
　　
　　五、對某容器中的圖片實現效果
　　
　　container: $("#container"),
　　
　　參數:container,值爲某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可讓你在拉動某DIV的滾動條時依次加載其中的圖片
　　
　　六、圖片排序混亂時
　　
　　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插件）