Preloading images with jQuery

javascript, jquery

Solution

Quick and easy:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Or, if you want a jQuery plugin:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Problem

I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important. I saw this here (http://nettuts.com...): ``` function complexLoad(config, fileNames) { for (var x = 0; x < fileNames.length; x++) { $("<img>").attr({ id: fileNames[x], src: config.imgDir + fileNames[x] + config.imgFormat, title: "The " + fileNames[x] + " nebula" }).appendTo("#" + config.imgContainer).css({ display: "none" }); } }; ``` But, it looks a bit over-the-top for what I want! I know there are jQuery plugins out there that do this but they all seem a bit big (in size); I just need a quick, easy and short way of preloading images!

Original source

Related problems