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

分析：

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

優點：實現簡單，不更改頁面Dom結構。

缺點：圖片數量大時，效率不夠好；ie6、ie7下替換SRC時有Bug存在。

2.textarea 延遲方案：

優點：JS效率高，分塊加載

缺點：需要更改Dom結構，需要限定textarea包圍區域的高度寬度，使用不夠方便。

3.Kissy的實現方式：1,2兩種方案都支持

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

優點：實現簡單

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

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

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

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

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

5.首頁延遲方案：

1)分塊加載圖片

2)滾屏中，在切換幀時觸發加載

實現：

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

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

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

總結：

在首頁的延遲加載優化過程中，嘗試過多種方式。

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

2)嘗試過textarea方案，UI體驗也不好；

3)改進了kissy的方案，不使用閥值，而是只在用戶視圖區域內加載圖片，無法分塊控制；

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