I'm successfully pre-loading an image on my website with this JavaScript:

loveHover = new Image();
loveHover.src = ".png";

Is there an easy an good way to pack this thing into a function? Something like:

function preloadImage(image) {
    var image = new Image();
    var path = "/";
    image.src = path + image;
}

I'm successfully pre-loading an image on my website with this JavaScript:

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

Is there an easy an good way to pack this thing into a function? Something like:

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

• javascript
• preload

3 Answers 3

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

To get this to work in IE versions earlier than 9, see the Array.forEach Compatibility section for instructions.

Well the unique part of the function would be the src (link to image). So make that the argument.

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

Then if you have multiple urls store them in an array:

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

And preload the images with a loop:

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

Have you tried not using javascript at all?

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