來源：http://www.jb51.net/article/46985.htm
如果一個網頁很長並且有很多圖片的話，下載圖片就需要很多時間，那麼就會影響整個網頁的加載速度，而這款延遲加載插件，會通過你的滾動情況來加載你需要看的圖片，然後它纔會從後臺請求下載圖片，最後顯示出來。通過這個插件，可以在需要顯示圖片的時候，才下載圖片，從而可以減少服務器的壓力，提高頁面加載速度。
Lazy Load 插件原理
修改目標img元素的src屬性爲orginal屬性，從而中斷圖片的加載。檢測滾動狀態，然後把網頁可視區域中的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>
但是現在，很多Javascript大牛分析得出，這個插件其實並沒有真正的起到緩加載的作用。確實是這樣，官方也已經給出了說明和解決方法了。
其實原因就在於在新版的瀏覽器中，即使我們刪除了Javascript控制的src屬性，瀏覽器仍然會去加載這個圖像。
那麼我們該怎麼解決呢？其實也很簡單，需要直接修改HTML的結構，在img標籤中添加新的屬性，把src屬性的值指向佔位圖片，添加data-original屬性，讓其指向真正的圖像地址。比如：
<img src="img/grey.gif" data-original="img/example.jpg" >
當然，在上面的代碼中我們把頁面內的所有圖片都延遲加載了，但有些時候我們並不希望這樣，因爲有些圖片並不想然他們延遲加載，那麼我們可以這樣只需做：
如只緩衝加載類main下的圖像
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
加載掛載有lazy類的圖像：
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此類推，適當做一下選擇器調整就行了。
lazyload.js 高級使用方法：
下面部分來自官方文檔，將官方文檔進行了一下簡單的翻譯。
更周全的做法
我們不得不思考這樣一個問題。我們定義了這樣一個結構，那麼網頁中，就不會加載源圖像了。只有當 Javascript 執行，纔會顯示這個源圖像。如果用戶的瀏覽器不支持或者用戶關掉了支持 Javascript 的選項，那麼我們的這個圖像就無法顯示出來。也就是說，如果沒有 Javascript 的支持，我們的圖像就無法顯示出來。
應對這個問題，我們需要引入noscript 標籤。大體思路如下：用 noscript 包含真實的圖像位置，當瀏覽器不支持 Javascript，直接顯示圖像。
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
對現有圖像，隱藏處理，使用 show()方法觸發顯示。
.lazy {
display: none;
}
這樣，如果瀏覽器不支持 Javascript，我們自定義的 img 就不會出現，而顯示 noscript 裏面的圖像。具體實現代碼如下：
$("img.lazy").show().lazyload();
提前加載
默認的情況是，當你滾動到圖片位置的時候，插件開始加載。這樣，用戶可能首先看到的是一個空白圖像，然後再緩慢出現。如果你想在用戶滾動之前，提前加載這個圖像，你可以配置一下參數。
$("img.lazy").lazyload({
threshold : 200
});
threshold 這個參數，就是用來提前加載的。上面這個語句的意思是，當距離圖片還有200像素的時候，就開始加載圖片。
自定義觸發事件
默認的觸發事件，是滾動，當你滾動的時候，就會檢查然後加載。你可以使用event屬性，設置你自己的加載事件，之後你可以自定義觸發這個事件的條件，然後去加載圖像。
$("img.lazy").lazyload({
event : "click"
});
自定義顯示效果
默認的圖片實現效果，就是沒有效果，下載完成之後，直接顯示出來。這樣的用戶體驗並不好，你可以設置effect屬性，來控制顯示圖片的效果。例如
$("img.lazy").lazyload({
effect : "fadeIn"
});
fadeIn的效果就是，改變圖片的透明度，漸現的方式出現。
把圖像插入某個容器
大家如果使用智能手機的話，經常去應用網站下載應用，他們通常使用一個橫着的容器，放一些手機截圖。使用container屬性，能很輕鬆在容器中實現緩衝加載。首先，我們需要用css定義這個容器，然後用這個插件進行加載。
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加載不可見圖像
有部分圖像是不可見的，我們對其加上類似 display:none;等屬性的圖像。默認的情況下，這個插件是不會加載隱藏的不可見圖像。如果我們需要用它加載不可見圖像，我們需要將 skip_invisible設置爲false，代碼如下：
$("img.lazy").lazyload({
skip_invisible : false
});
好了，這就是lazyload.js這款插件的簡單介紹了。
