緩存圖檔技術

有時候為了相應一些使用者的點選，展示一張圖檔，圖檔比較大的化，當點選事件觸發後，下載下傳圖檔可能需要一段比較長的事件。這個時候我們可以用一些技術，當使用者在做其他事情的時候，我們可以先把圖檔加載進來。

用戶端js定義了一個專用的API來達到一個目的：為了強制讓圖檔緩存起來，首先利用Image()構造函數來建立一個螢幕外圖檔對象，之後将該對象的src屬性設定成期望的URL。

下面是兩個代碼判斷：

一：

1 　　<div> 2 <script> 3 var image = new Image(); 4 image.src = "http://snowinmay.net/test/10.jpg"; 5 </script> 6 <img src="10-1.jpg" alt="圖檔" οnmοuseοver="this.src='http://snowinmay.net/test/10.jpg'" οnmοuseοut="this.src='10-1.jpg'"> 7 </div>

二：

1 　　<div> 2 <img src="9-1.jpg" alt="圖檔" οnmοuseοver="this.src='http://snowinmay.net/test/9.jpg'" οnmοuseοut="this.src='9-1.jpg'"> 3 </div>

代碼一可以在加載頁面的同時偷偷的加載10.jpg這個圖檔。當使用者點選的時候，直接展現給使用者。代碼二的話頁面加載的時候不加載9.jpg，隻有當使用者點選的時候才去加載圖檔，當網速不是很好的時候，就會有一個圖檔加載的過程。

在一中多加的代碼：

1 <script> 2 window.onload = function(){ 3 var image = new Image(); 4 for (var i = 1; i <= 9; i++) { 5 var url = "http://snowinmay.net/img/" + i + ".png"; 6 image.src = url; 7 }; 8 } 9 </script>

注意：

1.做測試的時候需要清除緩存。

2.需要讓頁面加載完再測試。