我們在瀏覽圖片量非常大的頁面時，像淘寶商城商品展示、必應圖片搜索這類網站，圖片的加載非常流暢，其中就應用了圖片延遲加載技術。本文講解Lazyload圖片加載插件，當我們打開頁面時，首先在屏幕可視區域加載完圖片，隨着向下滾動頁面，圖片會陸續加載，從而提升了頁面打開速度。
Lazyload是一款基於jQuery的插件，在要顯示大量圖片的頁面，圖片是按需加載的，只在瀏覽器可視區內加載圖片，當用戶使用滾動條下拉時，後面的圖片纔會繼續加載，從某種意義上講，這種技術減少了服務器的負載。您可以到Lazyload官網下載最新的版本：http://www.appelsiini.net/projects/lazyload。
XHTML
首先載入jquery庫和lazyload插件：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
在body中需要放置圖片的區域放置多個要顯示的圖片。圖片越多效果越明顯。
<img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" />
注意，每張圖片的src屬性對應的是一張預定義的圖片，就是再真正的圖片還沒加載的時候的替代圖片，我們通常使用1x1的blank.gif圖片。真正的圖片是由屬性data-original指定的，然後還需要設置圖片的寬度和高度。
jQuery
$(function(){
$("img").lazyload({
effect : "fadeIn"
});
});
和許多插件使用一樣，只需要在元素上調用lazyload()即可，現在你就可以看到效果了。Lazyload同樣提供了多個參數可設置不同的效果。
threshold：靈敏度，即可以通過設置靈敏度來控制圖片的加載，如設置爲200，即200像素前加載圖片，默認爲0，即到達圖片邊界時才加載。
event：綁定事件，即可以通過綁定click、mouseover或者任意自定義事件來觸發圖片的加載。默認是當用戶滾動到圖片窗口時觸發圖片加載。
effect：設置效果，即可以設置圖片加載時的特效，如fadeIn，默認是show。
您還可以設置一個容器裏的圖片橫向或縱向滾動加載效果，不過這個用的少，詳情請查看lazyload官網：http://www.appelsiini.net/projects/lazyload