您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 移動前端 >> 瀏覽設計教程

網(wǎng)頁首頁優(yōu)化-圖片延遲加載

為了提高用戶體驗,多圖片的長頁面需要使用延遲加載技術(shù),對這方面的論述,Kissy中有很經(jīng)典的論述,感興趣的朋友可以去這里了解一下(http://docs.kissyui.com/kissy/docs/datalazyload/index.html),本站http://m.likemindfilms.com的欄目頁和首頁也運用了這種技術(shù),我先簡單的介紹一下,然后討論如何改進并用于項目中。

分析:

1.       Img 更換 src方案:<img data-ls-src=”真正的路徑”,src=”load圖片的路徑”/>

優(yōu)點:實現(xiàn)簡單,不更改頁面Dom結(jié)構(gòu)。

缺點:圖片數(shù)量大時,效率不夠好;ie6、ie7下替換SRC時有Bug存在。

2.       textarea 延遲方案:

優(yōu)點:JS效率高,分塊加載

缺點:需要更改Dom結(jié)構(gòu),需要限定textarea包圍區(qū)域的高度寬度,使用不夠方便。

3.       Kissy的實現(xiàn)方式:1,2兩種方案都支持

圖1-1 延遲加載示例圖

如上圖所示,加載圖片時有一個閥值,所有閥值以上的圖片全部加載。

優(yōu)點:實現(xiàn)簡單

缺點:對一些用戶行為支持不夠,例如用戶直接將滾動條拉到頁面底部。

4.       首頁分析 (lp.taobao.com)

1)       首頁的長度比較長 4000*1000 以上

2)       分塊展示,分為10塊,1個首屏,2個滾屏,7個通用樓層

3)       每個分塊比較短,不超過一屏

5.       首頁延遲方案:

1)       分塊加載圖片

2)       滾屏中,在切換幀時觸發(fā)加載

實現(xiàn):

1)       打開頁面,默認只顯示首屏。

2)       當滾動條滾動到當前分塊時(可以附加一些像素,是圖片提前加載),加載當前分塊

3)       7個樓層添加額外的優(yōu)化,因為是同一種實現(xiàn),提供一個管理器,當用戶在某一個樓層上停留時間超過5秒,即可以加載未加載的樓層。

總結(jié):

在首頁的延遲加載優(yōu)化過程中,嘗試過多種方式。

1)       最初使用的是Kissy默認的替換src方案,發(fā)現(xiàn)在ie下,用戶刷新頁面時,會定位到上次滾動到得位置,此時用戶體驗特別差;

2)       嘗試過textarea方案,UI體驗也不好;

3)       改進了kissy的方案,不使用閥值,而是只在用戶視圖區(qū)域內(nèi)加載圖片,無法分塊控制;

4)       最后分塊加載圖片,同時也處理了樓層初始化。

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd1258.html
標簽?ID?還是CLASS?
網(wǎng)頁設計之CSS基線之道
圖趣網(wǎng)微信
建議反饋
×