快取圖片

快取圖片

     為了提高具有大量圖片的頁面的載入速度，提升使用者體驗，最好先將圖片下載到本地，讓瀏覽器快取起來。常用的方法是JS的Image物件:

 1 <script>
 2     function loadImage(url,callback) {
 3         var img=new Image();//建立一個Image物件，實現圖片預下載
 4         img.src=url;
 5         if (img.complete) {//如果圖片已經存在於瀏覽器快取，直接呼叫回撥函式
 6             callback.call(img);
 7             return;//直接返回，不用再處理onload事件
 8         }
 9         img.onload=function() {//圖片下載完成時非同步呼叫callback函式
10             callback.call(img);//將回撥函式的this物件替換為Image物件
11         }
12     }
13 </script>    

     當圖片載入過一次後如果再有對該圖片的請求時，瀏覽器已經快取過這張照片了，不會再發起一次請求，直接從快取中載入圖片。