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