Have you ever noticed that pages and images you’ve visited in the past always load faster than a page you’re visiting for the first time? This is because your browser cache the file when you visit the page for the first time and get the file from its cache when you visit the page second time. This makes the page loading faster.

Preloading images is good in certain situations especially if the user is on low speed internet connection or the image size is quite high. A simple jQuery code can help you to do this without any complications.

[code]
$.fn.preload = function() {
this.each(function(){
$(‘‘)[0].src = this;
});
}

// Usage:

$([‘img1.jpg’,’img2.jpg’,’img3.jpg’]).preload();
[/code]

Posted below is the demo of this plugin. If you check the below posted link using FireBug, you can see that when the counter reaches 18, it will start loading two images in the background. These two images are actually used in the inner page. So if the user open the inner page, he see the image already loaded as the browser loads the file from its cache instantly.