如果一個(gè)網(wǎng)頁很長(zhǎng)并且有很多圖片的話橄务，下載圖片就需要很多時(shí)間误债，那么就會(huì)影響整個(gè)網(wǎng)頁的加載速度票编，而這款延遲加載插件月腋，會(huì)通過你的滾動(dòng)情況來加載你需要看的圖片蟀架，然后它才會(huì)從后臺(tái)請(qǐng)求下載圖片，最后顯示出來榆骚。通過這個(gè)插件片拍，可以在需要顯示圖片的時(shí)候，才下載圖片妓肢，從而可以減少服務(wù)器的壓力捌省，提高頁面加載速度。
Lazy Load 插件原理（這里一定要注意５锬啤８倩骸！）
修改目標(biāo)img元素的src屬性為orginal屬性喊废，從而中斷圖片的加載祝高。檢測(cè)滾動(dòng)狀態(tài)，然后把網(wǎng)頁可視區(qū)域中的img的src屬性還原然后加載圖片污筷，從而制造了一種緩沖加載的效果工闺。代碼引入方法：
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加載圖片前的占位圖片
effect : "fadeIn" //加載圖片使用的效果(淡入)
});
});
</script>
但是現(xiàn)在，很多Javascript大牛分析得出，這個(gè)插件其實(shí)并沒有真正的起到緩加載的作用陆蟆。確實(shí)是這樣雷厂，官方也已經(jīng)給出了說明和解決方法了。
其實(shí)原因就在于在新版的瀏覽器中叠殷，即使我們刪除了Javascript控制的src屬性改鲫，瀏覽器仍然會(huì)去加載這個(gè)圖像。
那么我們?cè)撛趺唇鉀Q呢林束？其實(shí)也很簡(jiǎn)單钩杰，需要直接修改HTML的結(jié)構(gòu)，在img標(biāo)簽中添加新的屬性诊县，把src屬性的值指向占位圖片讲弄，添加data-original屬性，讓其指向真正的圖像地址依痊。比如：
當(dāng)然避除，在上面的代碼中我們把頁面內(nèi)的所有圖片都延遲加載了，但有些時(shí)候我們并不希望這樣胸嘁，因?yàn)橛行﹫D片并不想讓他們延遲加載瓶摆，那么我們可以這樣只需做：
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
這樣就限定了圖片延遲加載的范圍
或者也可以這樣
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此類推，適當(dāng)做一下選擇器調(diào)整就行了性宏。
lazyload.js 高級(jí)使用方法：
下面部分來自官方文檔
我們不得不思考這樣一個(gè)問題群井。我們定義了這樣一個(gè)結(jié)構(gòu)，那么網(wǎng)頁中毫胜，就不會(huì)加載源圖像了书斜。只有當(dāng) Javascript 執(zhí)行，才會(huì)顯示這個(gè)源圖像酵使。如果用戶的瀏覽器不支持或者用戶關(guān)掉了支持 Javascript 的選項(xiàng)荐吉，那么我們的這個(gè)圖像就無法顯示出來。也就是說口渔，如果沒有 Javascript 的支持样屠，我們的圖像就無法顯示出來。
應(yīng)對(duì)這個(gè)問題缺脉，我們需要引入noscript 標(biāo)簽痪欲。大體思路如下：用 noscript 包含真實(shí)的圖像位置，當(dāng)瀏覽器不支持 Javascript攻礼，直接顯示圖像业踢。
<noscript></noscript>
對(duì)現(xiàn)有圖像，隱藏處理秘蛔，使用 show()方法觸發(fā)顯示陨亡。
.lazy {
display: none;
}
這樣傍衡，如果瀏覽器不支持 Javascript深员，我們自定義的 img 就不會(huì)出現(xiàn)负蠕，而顯示 noscript 里面的圖像。具體實(shí)現(xiàn)代碼如下：
$("img.lazy").show().lazyload();
提前加載
默認(rèn)的情況是倦畅，當(dāng)你滾動(dòng)到圖片位置的時(shí)候遮糖，插件開始加載。這樣叠赐，用戶可能首先看到的是一個(gè)空白圖像欲账，然后再緩慢出現(xiàn)。如果你想在用戶滾動(dòng)之前芭概，提前加載這個(gè)圖像赛不，你可以配置一下參數(shù)。
$("img.lazy").lazyload({
threshold : 200
});
threshold 這個(gè)參數(shù)罢洲，就是用來提前加載的踢故。上面這個(gè)語句的意思是，當(dāng)距離圖片還有200像素的時(shí)候惹苗，就開始加載圖片殿较。
自定義觸發(fā)事件
默認(rèn)的觸發(fā)事件，是滾動(dòng)桩蓉，當(dāng)你滾動(dòng)的時(shí)候淋纲，就會(huì)檢查然后加載。你可以使用event屬性院究，設(shè)置你自己的加載事件洽瞬，之后你可以自定義觸發(fā)這個(gè)事件的條件，然后去加載圖像业汰。
$("img.lazy").lazyload({
event : "click"
});
自定義顯示效果
默認(rèn)的圖片實(shí)現(xiàn)效果片任，就是沒有效果，下載完成之后蔬胯，直接顯示出來对供。這樣的用戶體驗(yàn)并不好，你可以設(shè)置effect屬性氛濒，來控制顯示圖片的效果产场。例如
$("img.lazy").lazyload({
effect : "fadeIn"
});
fadeIn的效果就是，改變圖片的透明度舞竿，漸現(xiàn)的方式出現(xiàn)京景。
把圖像插入某個(gè)容器
大家如果使用智能手機(jī)的話，經(jīng)常去應(yīng)用網(wǎng)站下載應(yīng)用骗奖，他們通常使用一個(gè)橫著的容器确徙，放一些手機(jī)截圖醒串。使用container屬性，能很輕松在容器中實(shí)現(xiàn)緩沖加載鄙皇。首先芜赌，我們需要用css定義這個(gè)容器，然后用這個(gè)插件進(jìn)行加載伴逸。
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加載不可見圖像
有部分圖像是不可見的缠沈，我們對(duì)其加上類似 display:none;等屬性的圖像。默認(rèn)的情況下错蝴，這個(gè)插件是不會(huì)加載隱藏的不可見圖像洲愤。如果我們需要用它加載不可見圖像，我們需要將 skip_invisible設(shè)置為false顷锰，代碼如下：
$("img.lazy").lazyload({
skip_invisible : false
});
