预加载图像的功能？

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;
});

要使其在早于 9 的 IE 版本中工作，请参阅 Array .forEach 兼容性部分 了解说明。

Answer 2

该函数的独特部分是 src（图像链接）。所以以此作为论据。

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

然后，如果您有多个 url，请将它们存储在一个数组中：

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]);

Answer 3

您是否尝试过完全不使用 javascript？

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