緩存圖片技術

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

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

下面是兩個代碼判斷：

一：

　　<div>
        <script>
        var image = new Image();
        image.src = "http://snowinmay.net/test/10.jpg";
        </script>
        <img src="10-1.jpg" alt="圖片" onmouseover="this.src='http://snowinmay.net/test/10.jpg'" onmouseout="this.src='10-1.jpg'">
    </div>

二：

　　<div>
        <img src="9-1.jpg" alt="圖片" onmouseover="this.src='http://snowinmay.net/test/9.jpg'" onmouseout="this.src='9-1.jpg'">
    </div>

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

下面給出兩個具體的例子：

一：載入網頁同時加載圖片

http://snowinmay.net/index-419.html

二：載入網頁的時候不加載圖片

http://snowinmay.net/index-510.html

由這兩個例子明顯可以感覺到第二個頁面在點擊圖片的時候有一個加載過程，而第一個頁面則直接顯示圖片。

在一中多加的代碼：

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

 

注意：

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

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