Javascript to Pre Load Images

Normal behaviour for images on web pages is to load them when they are required. This can sometimes create an undesirable delay whilst the user navigates around the page. Not good, and annoying for the user. To get around this problem you can load the images you know you'll use as the page loads, giving the user a smoother experience.

The following Javascript loads images into an array. This forces the images to be downloaded, so that when the page requires them the browser will automatically get them from the cache. Add this code the head section.

<script type="text/javascript">

function preloadImages()
{
var images=[];
for(i=0; i<arguments.length; i++)
{
images[images.length]=new Image();
images[images.length-1].src=arguments[i];
}
}

preloadImages('your.jpg','list.jpg','of.jpg','images.jpg','goes.jpg','here.jpg');

</script>

Obviously (I hope), change the list of images passed in the call to the preloadImages function, to your own list of images.

Image Preload... Done.

Example: Preloaded images used for a slideshow