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

為了提高用戶體驗，多圖片的長頁面需要使用延遲加載技術(shù)，對這方面的論述，Kissy中有很經(jīng)典的論述，感興趣的朋友可以去這里了解一下（http://docs.kissyui.com/kissy/docs/datalazyload/index.html），本站http://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)       最后分塊加載圖片，同時也處理了樓層初始化。