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

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

分析：

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

優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單，不更改頁(yè)面Dom結(jié)構(gòu)。

缺點(diǎn)：圖片數(shù)量大時(shí)，效率不夠好；ie6、ie7下替換SRC時(shí)有Bug存在。

2.       textarea 延遲方案：

優(yōu)點(diǎn)：JS效率高，分塊加載

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

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

圖1-1 延遲加載示例圖

如上圖所示，加載圖片時(shí)有一個(gè)閥值，所有閥值以上的圖片全部加載。

優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單

缺點(diǎn)：對(duì)一些用戶行為支持不夠，例如用戶直接將滾動(dòng)條拉到頁(yè)面底部。

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

1)       首頁(yè)的長(zhǎng)度比較長(zhǎng) 4000*1000 以上

2)       分塊展示，分為10塊，1個(gè)首屏，2個(gè)滾屏，7個(gè)通用樓層

3)       每個(gè)分塊比較短，不超過(guò)一屏

5.       首頁(yè)延遲方案：

1)       分塊加載圖片

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

實(shí)現(xiàn)：

1)       打開頁(yè)面，默認(rèn)只顯示首屏。

2)       當(dāng)滾動(dòng)條滾動(dòng)到當(dāng)前分塊時(shí)（可以附加一些像素，是圖片提前加載），加載當(dāng)前分塊

3)       7個(gè)樓層添加額外的優(yōu)化，因?yàn)槭峭环N實(shí)現(xiàn)，提供一個(gè)管理器，當(dāng)用戶在某一個(gè)樓層上停留時(shí)間超過(guò)5秒，即可以加載未加載的樓層。

總結(jié)：

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

1)       最初使用的是Kissy默認(rèn)的替換src方案，發(fā)現(xiàn)在ie下，用戶刷新頁(yè)面時(shí)，會(huì)定位到上次滾動(dòng)到得位置，此時(shí)用戶體驗(yàn)特別差；

2)       嘗試過(guò)textarea方案，UI體驗(yàn)也不好；

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

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