大量采用高解析度的圖像的確可以讓一個Web站點容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關。現在，讓我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度。
一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時。預裝載就是一種在需要圖片之前就將圖片下載到緩存的技術。采用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來並立即顯示。
Image()對象
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象，然后將希望預裝載的圖片URL傳遞給此對象。假設我們擁有一個名為heavyimagefile.jpg的圖片文件，我們希望當用戶鼠標指針移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進行預裝載，我們簡單的創建了一個名為heavyImage的新Image() 對象，然后將其通過onLoad()事件句柄同步裝載到頁面上。
<html> <head> <script language = "JavaScript"> function preloader() { var heavyImage = new Image(); heavyImage.src = "heavyimagefile.jpg"; } </script> </head> <body onLoad="javascript:preloader()"> <a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"> <img name="img01" src="justanotherfile.jpg"></a> </body> </html>
注意，圖片的標簽（tag）本身並不處理onMouseOver()以及onMouseOut()事件，這也正是上面示例中的<img>標簽被包括在<a>標簽中的原因。標簽<a>則包括了對這些事件類型的支持。
通過數組（arrays）裝載多個圖片
在實際情況中，你很有可能需要預裝載不止一張的圖片；比如，對於包括多個圖片的菜單條，或者希望實現平滑的動畫效果。要實現這些並不困難，只需要利用JavaScript的數組，如下例所示：
<script language="JavaScript"> function preloader() { // counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="image1.jpg" images[1]="image2.jpg" images[2]="image3.jpg" images[3]="image4.jpg" // start preloading for(i=0; i<=3; i++) {
var imageObj = new Image; imageObj.src=images[i]; } } </script>
在上面的例子中，定義了變量i以及名為imageObj的Image()對象。然后定義了新數組images[]，每一個數組元素將存儲需要預裝載圖片的地址來源。最后，使用一個for()循環來遍歷整個數組，並對每個元素指定Image()對象，以此將圖片都預裝載到緩存中。