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?
