淺談Javascript緩載和預載

一、緩載、預載的概念
這些技術不僅限於圖片載入，但我們首先討論最常用的圖片載入。

1、緩載：消極式載入圖片或符合某些條件時才載入某些圖片。

2、預載：提前載入圖片，當使用者需要查看時可直接從本機快取中渲染。

兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。緩載對伺服器前端有一定的緩解壓力作用，預載則會增加伺服器前端壓力。

二、緩載的意義與實現

緩載的主要目的是作為伺服器前端的最佳化，減少請求數或延遲請求數。

主要體現在三種模式上：

第一種是純粹的消極式載入，使用setTimeOut或setInterval進行載入延遲，如果使用者在載入前就離開了頁面，那麼就不會載入。

第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步下載。

第三種是可視區載入，即僅載入使用者可以看到的地區，這個主要由監控捲軸來實現，一般會在距使用者看到某圖片前一定距離遍開始載入，這樣能保證使用者拉下時正好能看到圖片。

三、預先載入的意義與實現

預先載入可以說是犧牲伺服器前端效能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。實現預載的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();，設定其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用緩衝，這是最基本也是最實用的預載方法。當Image下載完圖標題後，會得到寬和高，因此可以在預載前得到圖片的大小(我所知的方法是用記時器輪循寬高變化)。一般實現預載的工具類，都實現一個Array來存需要預載的URL，然後實現Finish、Error、SizeChange等常用事件，可以由使用者選擇是順序預載或假並發預載。

四、類庫

Jquery的Lazy Load用於圖片緩載，Jquery的PreLoad可以用於預載。

五、擴充到非圖片

擴充的非圖片，主要以DIV為例。一種實現設計模式：我們給需要緩載的DIV加上一個代理類，這樣一旦觸發其載入事件則會自動的調用代理類進行更新資料。然後將這些需要載入的DIV放入一個集合，計算他們的滾動量，同時設定一個位移量，然後設定其監視瀏覽器捲軸，以實現動態緩載。