Preload images

How to show preloader until image is loaded

[vsgill]

Hi Everyone
I am making a javascript image gallery. It show a thumbnail on the main page and load a larger image when a thumbnail is clicked.

here is the function that i use to swap image...

function ShowAdImage(imgHolder,img_src, img_AltText) {
var myImage = document.getElementById(imgHolder);
myImage.src = img_src;
myImage.alt = img_AltText;
document.getElementById("AdImageSlideShow").style.display = "block" // this is the image wraper div
}

how can i use a pre loader with it... is there any onload event or any way or making a callback function which can hide the loader image and display the loaded image?

Can any1 point me to the rite direction...pls

Thanks Vik

[penders]

The method you suggest sounds as if it should work OK to display a preloader image... The preloader image would be on the page when it first loads (but hidden). Your ShowAdImage() function displays the preloader image. The onload event of the imgHolder image element hides the preloader and possibly shows the main image.

Just a query regarding your ShowAdImage() function as it stands... you pass the id of the <img> element, but the id of the <img> container (which you show) is hard-coded?

[StupidScript]

How about an oldie-but-goodie?

<img src="realimg.png" lowsrc="whileloading.png" />

According to your code, do you have the wrapping div's display attribute set to "none" before swapping? If so, it doesn't matter what the image it wraps is, as it would be hidden until your function is triggered.

If this is not the case, then simply assigning a new src attribute to the image object would immediately replace whatever was there before with the new src value when the function is triggered. There's no need to modify the wrapping div's display attribute value unless it gets hidden by some other function at some point. Once it's visible, it's visible, and changing the src attribute's value is what swaps the picture, not showing or hiding the wrapping div.