使用JavaScript改變圖片路徑時存在一個問題：當把新檔案的路徑交換到src屬性中時，瀏覽器必須下載該影象。如果等到某人把滑鼠游標移動到影象上之後才下載新影象，在新影象出現之前，可能會有一段不愉快的延遲。在導航欄的情況下，翻滾效果會令人感到遲緩而響應很慢。

為了避免這一延遲，預先載入任何想要立即出現以作為對操作的響應的影象。例如，當訪問者的滑鼠游標移動到導航欄上的一個按鈕，翻滾影象應該立即出現。預載入一個影象只是意味著強迫瀏覽器在我們計劃顯示該影象之前下載它。當影象下載完，它儲存在Web瀏覽器的快取中，這樣後續對該檔案的任何請求都由訪問者的硬碟驅動器提供，而不需要等待從Web伺服器下載的數秒時間。

預載入影象和建立一個新的image物件並設定該物件的src屬性一樣：

1. var newPhoto=new Image（）；
2. newPhoto.src='images/newImage.jpg'；

所謂預載入，就是在需要替換Web頁面上的一個當前影象之前進行。預載入的一種方法是在指令碼的開始處建立一個數組，其中包含了要預載入的所有影象的路徑，然後遍歷這個列表，為每個專案建立一個新的image影象：

1. var preloadImages=['images/roll.png'，
2. 'images/flower.png'，
3. 'images/cat.jpg']；
4.  var imgs=[]；
5.  for（var i=0；i＜preloadImages.length；i++）{
6. imgs[i]=new Image（）；
7. imgs[i].src=preloadImages[i]；}

第1行到第3行是一條JavaScript語句，它建立了一個名為preloadImages的陣列，包含了3個值，分別是每個要預載入的圖形檔案的路徑（把每個陣列項單獨一行放置，往往更容易閱讀）。第4行建立了一個新的空陣列：imgs，它將儲存每個預載入的影象。第5行到第8行給出了一個基本的JavaScript for循環，它對於陣列preloadImages中的每個專案都執行一次。第6行建立了一個新的image物件，而第7行獲取了來自preloadImages陣列的檔案路徑，這就是導致影象下載的魔術所在。