Question

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!

Answer 1

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