預加載圖像的功能？

Question

我成功地在我的網站預加載的圖像與這個JavaScript：

loveHover = new Image(); 
loveHover.src = "http://mypage.com/images/love-hover.png"; 

有一個簡單的收拾這個東西變成一個功能的好方法嗎？類似於：

function preloadImage(image) { 
    var image = new Image(); 
    var path = "http://mypage.com/images/"; 
    image.src = path + image; 
} 

Answer 1

["love-hover.jpg", "like-hover.jpg", "hate-hover.jpg"].forEach(function(img) 
{ 
    new Image().src = "http://mypage.com/" + img; 
}); 

爲了得到這個工作的IE版本早於9，請參閱Array.forEach Compatibility section以獲取說明。

Answer 2

您是否嘗試過不使用JavaScript？

http://perishablepress.com/press/2008/06/14/a-way-to-preload-images-without-javascript-that-is-so-much-better/

Answer 3

嘛功能的獨特之處將是SRC（鏈接到圖像）。所以請說出這個論點。

function preloadImage(src) { 
    var image = new Image(); 
    image.src = src; 
} 

然後，如果你有多個網址，並將其存儲在一個數組：

var imageSrcs = [ 
    "http://mypage.com/images/love-hover.png#", 
    "http://mypage.com/images/love-hover2.png", 
    "http://mypage.com/images/love-hover3.png" 
]; 

並配有循環預載的圖片：

for (var i = 0; i < imageSrcs.lengthl i++) 
    preloadImage(imageSrcs[i]);