如果一張網(wǎng)頁有幾十張甚至上百張圖片需要展示，那么當(dāng)打開網(wǎng)頁時(shí)如果從頭到尾不間斷加載完，必定需要花費(fèi)很長的時(shí)間，嚴(yán)重的情況還會(huì)導(dǎo)致網(wǎng)頁停滯假死，這將給用戶帶來極壞的使用體驗(yàn)，因此需要解決這個(gè)問題。
這里介紹一個(gè)使用很廣泛的插件Lazy Load，Lazy Load是一個(gè)用JavaScript 編寫的 jQuery 插件，它可以延遲加載長頁面中的圖片。在瀏覽器可視區(qū)域外的圖片不會(huì)被載入，直到用戶將頁面滾動(dòng)到它們所在的位置。這個(gè)圖片延遲加載插件，對(duì)于那些圖片較多的長頁面是非常有好處的。
這是演示頁面。
Lazy Load插件下載及使用方法
Lazy Load插件包含兩個(gè)js文件：
jquery.min.js
jquery.lazyload.js
可以在這里下載：下載插件。
而使用方法也非常簡單。
1、在網(wǎng)頁任何位置（一般是在</body>前面）加上如下代碼（注意<script>引用的兩個(gè)js文件，路徑自行設(shè)定）：
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.js?v=1.9.0"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload();
});
</script>
2、圖片的html代碼<img>標(biāo)簽需要這樣寫：
<img class="lazy" src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
說明：
①：<img>里加上class="lazy"
②：<img>里的src為一張預(yù)加載的圖片，使用只有幾十字節(jié)大小的圓點(diǎn)gif圖片即可。
③：<img>里的data-original為真正需要顯示的圖片地址。
④：<img>里的alt為圖片說明文字，在圖片還沒加載時(shí)顯示。這個(gè)可有可無。
Lazy Load插件其他功能
Lazy Load插件還有其他的一些功能，例如淡入展示效果；事件觸發(fā)加載，如click、mouseover；隱藏圖片加載等，需要了解更多可以進(jìn)入作者的網(wǎng)站：http://www.appelsiini.net/projects/lazyload
