網(wǎng)站優(yōu)化提速之圖片延時加載

為了提高用戶體驗，多圖片的長頁面需要使用延遲加載技術(shù)，對這方面的論述，Kissy中有很經(jīng)典的論述，感興趣的朋友可以去了解一下，我先簡單的介紹一下，然后討論如何改進并用于項目中。

分析：

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兩種方案都支持

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

優(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)最后分塊加載圖片，同時也處理了樓層初始化