jquery.lazyload實現圖片延遲加載

如果留意淘寶的話,應該可以注意到:當打開產品頁面后，并不是把頁面中圖片都下載下來,而是隨著滾動條的滾動而加載圖片.這樣可以使頁面載入速度更快,節省網站流量,減少服務器的負載.你可以靈活的把這一技術運用在存在大量圖片的頁面,比如頻道頁、活動頁、搜索結果頁等……( 我的博客列表頁圖片的展示也采用相同的技術)

也許你還是一頭霧水,別著急接著往下看:

什么是ImageLazyLoad技術

在頁面上圖片比較多的時候，打開一張頁面必然引起與服務器大數據量的交互。尤其是對于高清晰的圖片，占的幾M的空間。ImageLazyLoad技術就是，當前可見界面的圖片是加載進來的，而不可見頁面（通過滾動條下拉可見）中的圖片是不加載的，這樣勢必會引起速度上質的提升。

怎么實現ImageLazyLoad

一、使用JQuery插件 ，插件名: jquery.lazyload（7kb大小），壓縮后（3kb大小）

在線壓縮js http://tool.liehuo.net/tool/reducejs.asp

在頁腳添加以下代碼即可：

大家可以直接采用淘寶的延遲加載技術：
http://www.vxbq.cn/uploads/allimg/1002/imglazyload-min.js

調用方法也是很簡單的：
<script src=”http://www.vxbq.cn/uploads/allimg/1002/imglazyload-min.js“
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>

注：該腳本依賴 yahoo-dom-event, 頁面中需要加載 yui 2.x,你也可以直接引用下面的地址:
<script src="http://www.vxbq.cn/uploads/allimg/1002/yahoo-dom-event.js" type="text/javascript"></script>

至于高級配置，大家可以看這里;

配置參數如下：
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延遲模式。默認為 auto
diff: 200 // 當前屏幕下多遠處的圖片開始延遲加載。默認兩屏外的圖片才延遲加載
});
</script>

manual 模式時，需要手動將頁面中需要延遲加載的圖片的 src 屬性名更改為 data-lazyload-src. 比如 SRP 頁面，寶貝列表的后20個圖片延遲加載。輸出時，html 代碼為：

<img data-lazy-src="path/to/img" alt="something" />

如果您是Jquery，Prototype等這些JS框架的粉絲，他們都有定制的LazyLoad Plugin提供；

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延遲加載)技術不僅僅用在對網頁中圖片的延遲加載，對數據同樣可以，Google Reader和Bing圖片搜索就把
LazyLoad技術運用的淋漓盡致；

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈