jQuery圖片預載入(延遲載入)之插件Lazy Load

     Lazy Load也叫惰性載入，延遲載入，顧名思義，就是在圖片未到達可視區域時，不載入圖片，我們常常在很多的優秀網站上看到類似的例子，例如迅雷、土豆、優酷等，由於一個網頁的圖片非常多，一次性載入增加伺服器壓力，而且用戶未必會拉到底部，浪費用戶流量，Lazy Load採用按需載入，更快的載入速度從而達到優化網頁的目的。

如何使用

 1.在HTML代碼的底部包含jquery.lazyload.js和jquery.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2.設置圖片的占位符為data-original，給圖片一個特別的標簽，圖片設置起來像這樣：

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

$(function(){
    $("img.lazy").lazyload();
});

註意：你必須給圖片設置一個height和width，或者在CSS中定義，否則可能會影響到圖片的顯示。

插件選項

 圖片預先載入距離：threshold，通過設置這個值，在圖片未出現在可視區域的頂部距離這個值時載入。預設為0，下麵為設置threshold為200表示在圖片距離可視區域還有200像素時載入。

$("img.lazy").lazyload({
    threshold :200
});

事件綁定載入的方式：event，你可以使用jQuery的事件，例如“click”、“mouseover”，或者你也可以自定義事件，預設等待用戶滾動，圖片出現在可視區域。下麵是使用click：

$("img.lazy").lazyload({event:"click"});

顯示效果：effect，預設使用show()，你可以使用fadeIn（逐漸出現）方式，代碼如下：

$("img.lazy").lazyload({
    effect :"fadeIn"
});

對於禁用javascript的瀏覽器則要加上noscript內容：

<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

圖片限定在某個容器內：container，你可以通過限定某個容器內容的圖片才會生效，代碼如下：

#container {
    height:600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
     container: $("#container")
});