如何給圖片作緩存

在大型網頁中，咱們會遇到一張大圖片須要被下載下來，可是要考慮到圖片下載下來的時間會阻塞其餘資源的下載，爲了有效得控制住圖片所佔用的網絡資源，可使用javascript方式來解決這個問題，大概代碼是這樣的：

 1 function preloadImages(array) {
 2     if (!preloadImages.list) {
 3         preloadImages.list = [];
 4     }
 5     for (var i = 0; i < array.length; i++) {
 6         var img = new Image();
 7         img.onload = function() {
 8             var index = preloadImages.list.indexOf(this);
 9             if (index !== -1) {
10                 // remove this one from the array once it's loaded
11                 // for memory consumption reasons
12                 preloadImages.splice(index, 1);
13             }
14         }
15         preloadImages.list.push(img);
16         img.src = array[i];
17     }
18 }
19 
20 preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);

咱們能夠看得出來，這是對須要加載的圖片進行預加載，可是這樣就可以緩存圖片嗎，不是的，這只是給圖片進行預加載，並不能算是緩存圖片，當圖片加載到網頁中的時候，瀏覽器會對這些資源進行緩存，在第二次加載的時候不會從新請求服務器，它會預先加載緩存的文件