前端優化之圖片延遲載入（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插件）