轉帖|其它|編輯:郝浩|2011-06-02 15:25:05.000|閱讀 1008 次
概述:本篇內容本來是想作為JS單元測試的Demo放出,但是看到不少朋友對分塊延遲加載的具體實現感興趣,我就在這里跟大家探討一下,請多多提建議。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
簡介:
本篇內容本來是想作為JS單元測試的Demo放出,但是看到不少朋友對分塊延遲加載的具體實現感興趣,我就在這里跟大家探討一下,請多多提建議。
分析:
1、適用于頁面可以將圖片劃分區塊,如無名良品金喜正規買球的各個樓層。
2、多個區塊,并且區塊的粒度適中,每個最好在半屏到2屏之間。
3、更適合于每個區塊上有導航的情形,因為會導航到中間區塊,上面下面的區塊都不加載圖片。
實現:
1、 更改頁面img 元素,將<img src=”圖片地址”/> 更改為:<img data-ks-lazyload=” 圖片地址” />,其中 data-ks-lazyload 為自定義屬性,自己可以指定屬性名。
2、初始化:
1)遍歷區塊內所有圖片,包含 data-ks-lazyload 屬性的圖片放入數組,添加默認的占位圖片(Loading圖片)<img data-ks-lazyload=” 圖片地址” src=”loading 圖片”/>。
2) 判斷當前區塊是否在用戶視圖內,如果在用戶視圖內則加載所有圖片,不在用戶視圖內,則添加窗口Scroll事件和窗口Resize事件。
3、加載圖片
1) 當用戶視圖移動到當前區塊時,如果注冊了事件則加載圖片,加載完移除事件。
2) 加載區塊圖片時,將圖片改為<img src=”圖片地址”/>,在ie6,ie7下修正圖片大小。
4、 Demo
總結:
Demo中的代碼比較簡單大部分是Kissy中 datalazyload.js中的,其中重寫了判斷是否在當前視圖內,和加載區塊圖片的函數,當用戶停留在具體某區塊超過5秒后可以加載其他區塊,這個實現沒寫在代碼中,感興趣的可以自己實現一下。下面還有一遍博客,是針對分塊延遲加載JS做的單元測試,共同學習,共同討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:網絡轉載