如果網頁包含大量圖片，那么，采用Lazyload來延遲圖片的載入以加速網頁整體在瀏覽器中的載入是個不錯的方法！
上面這句話并不是翻譯來的，只是我想一句話說完。
下面開始吧：
1.在頁面頭部加載jQuery和這個Lazyload插件，如果已經加載過了jQuery，那就不用再次加載了：
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
是的，我習慣在國內用又拍云的云加速。
對圖片的處理：
<img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg" width="730" heigh="300">
上面示例中的grey.gif實際上相當于一個占位符，建議采用1*1px的灰色png或者gif，data-original后面的才是真正的圖片鏈接，class="lazy"是個可以定義的特定class。
Lazyload基本設置
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload();
});
</script>
Lazyload基本設置的在線DEMO:Lazyload DEMO1
對不支持js瀏覽器的處理
<img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg" width="730" heigh="300">
<noscript><img src="img/true_image.jpg" width="730" heigh="300"></noscript>
用CSS隱藏占位符：
.lazy {
display: none;
}
對支持js的瀏覽器，應該在DOM準備階段就初始化插件：
$("img.lazy").show().lazyload();
當然了，這樣處理兼容性更好，不過現在的瀏覽器大多都是支持js的。
加載敏感度
默認的情況下，圖片將會在出現在屏幕上時顯示，如果想提載入圖片，可以使用 threshold 進行設置，下例的含義是：在圖片距離屏幕180px時提前載入：
$("img.lazy").lazyload({ threshold :180});
占位圖片
可以自定義一個簡單的淺色或灰色系的小圖片（越小越好，1*1px最佳，格式推薦采用gif）作為占位圖片來觸發(fā)加載動作。
事件觸發(fā)
可以是jQuery的任何事件（如click、mouseover），還可以使用自己定義的事件。
例如：處于等待狀態(tài), 直到瀏覽者滾動到窗口中圖片所在位置，在占位圖片被點擊之前不加載圖片, 可以這樣做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
特效的使用
當圖片完全加載的時候，默認使用show()方法來顯示圖片，所以，上面的那個基本設置示例中未寫出show(),但是可以照常運行。
圖片淡入（FadeIn）效果
$("img.lazy").lazyload({
effect : "fadeIn"
});
Lazyload圖片淡入效果演示
將圖片放在特定容器中
先看示例：水平滾動演示頁面和垂直滾動的演示頁面
CSS部分示例
#container {
height: 600px;
overflow: scroll;
}
js部分示例
$("img.lazy").lazyload({
container: $("#container")
});
圖片未按順序排列的情況
滾動頁面的時候，Lazyload會按照在HTML代碼中的順序先后可視范圍內的加載圖片，在第一張不在可視范圍內的圖片處停止執(zhí)行，但是在某些頁面布局中，這種聰明的假設可能是不成立的，那么可以用failurelimit來控制加載動作：
$("img.lazy").lazyload({
failure_limit : 10
});
上面的意思是：在找到10張不在可視范圍內的圖片時停止執(zhí)行。額，好吧，如果你的頁面布局猥瑣到10不足以滿足的時候，那就再大一些吧。
Lazyload定時延遲圖片載入
Lazyload的一個并不完備的功能，并不影響使用，但是實際用途并不大！用途描述：在頁面和可見圖片載入后一定時間內載入圖片。Lazyload定時延遲圖片載入示例
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});
上例中采用的參數或者說定時是5秒。
加載隱藏的圖片
你的頁面上可能隱藏了很多不可見的圖片用作特殊用途，Lazyload默認是忽略這些圖片的，如果不想忽略掉，可以這樣：
$("img.lazy").lazyload({
skip_invisible : false
});
Lazyload下載與兼容性
最新的未壓縮版 source與壓縮版 minified。
你看到這篇文章時可能有更新的版本了，請點擊Lazyload了解更多！
兼容于：
OSX平臺： Safari 5.1, Safari 6, Chrome 20, Firefox 12
WIN平臺：Chrome 20, IE 8 and IE 9 on Windows
iPhone和 iPad上：Safari 5.1