Faster image loading

Question

I want to display about 5-8 images on my page, one by one, but I would like them to pre-load one and not loading them each time i switch to anohter image.

I have seen some examples where they have all images (hidden) on the page something like:

<a href=""><img id="img1" src="images/image1.png" class="image" alt="" /></a>
<a href=""><img id="img2" src="images/image1.png" class="image" alt="" /></a>
<a href=""><img id="img3" src="images/image1.png" class="image" alt="" /></a>

And the unhide the current image.

And what I have is one image that i change it's src attribute for path for new images from th array.

SwitchNextImage: function(){    
   var theimg=document.getElementById("imgContainer");                  

   this.currentIndex = this.currentIndex+ 1 == this.totalImageCount ? 0 : this.currentIndex + 1;
   theimg.src=this.slideimages[this.currentIndex].src;          
}

The first method is obviously faster loading. But requies static links.
My questions is how can I make my method more faster loading?

Answer 1

upon loading the document you can create an array with Image objects. see this article on techrepublic

Answer 2

You should look into image preloading. You can achieve what you want through javascript by creating a new image object for each image:

var img = new Image();
img.src = "image2.png";

This will fetch the image and store it in the cache without actually displaying it on the page, so when you come to switching the src of your main image, the browser can fetch it from the cache. Repeat this for all of your images and you should be set.