存在大量圖片的頁(yè)面,比如頻道頁(yè)、活動(dòng)頁(yè)、搜索結(jié)果頁(yè)等,可大大提高網(wǎng)頁(yè)打開(kāi)的速度
在頁(yè)腳添加以下代碼即可:
<script type="text/javascript" src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js"></script>
<script type="text/javascript">KISSY.ImageLazyload();</script>
注:該腳本依賴 yahoo-dom-event, 頁(yè)面中需要加載 yui 2.x
配置參數(shù)如下:
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延遲模式。默認(rèn)為 auto
diff: 200 // 當(dāng)前屏幕下多遠(yuǎn)處的圖片開(kāi)始延遲加載。默認(rèn)兩屏外的圖片才延遲加載
});
</script>
manual 模式時(shí),需要手動(dòng)將頁(yè)面中需要延遲加載的圖片的 src 屬性名更改為 data-lazyload-src. 比如 SRP 頁(yè)面,寶貝列表的后20個(gè)圖片延遲加載。輸出時(shí),html 代碼為:
<img data-lazy-src="path/to/img" alt="something" />
聯(lián)系客服