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?