Preload images with jQuery

Pre-loading the images is often necessary when using a new image content which was never used before on the page. This article shows the easiest way to pre-load the images with jQuery.

Simple image preload with jQuery

var imgList = ['/dir/to/image1.png','/dir/to/image2.png','/dir/to/image3.png','/dir/to/image4.png'];

$(imgList).each(function() {
 var image = $('<img />').attr('src', this);
 });

With the above script, preloading images using jQuery is made very simple and perhaps the esiest way to preload images using jQuery.

jQuery plugin code for image preloading:

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

var imgList = ['/dir/to/image1.png','/dir/to/image2.png','/dir/to/image3.png','/dir/to/image4.png'];

Usage:

$(images).preload();