Clear Image, Then Reload A New One

[blazingwolf7]

Hi,

I am a newbie to Javascript and is recently developing a website with some Javascript function. Its a basic function, where when user point to a thumbnails, a larger version of the image will be loaded.

The larger image might take some time to load, so to show some respond to the user, I will load another image with the word loading on it first, then it will proceed to loading the larger version of the image. The code is as follows:

Code: Select all

function update(url,index,isSuper){
        document['PhotoBig'].src = "loading.gif";
   document['PhotoBig'].src=url;
}


So now the problem is, when I point to the thumbnails, the larger version of the image will be loaded immediately instead of loading the loading.gif image first. What had I did wrong?

can anyone advise me on this? Thanks

[harrierdh]

You really didn't provide enough code. Post all your html and javascript or a link to the web page. I think you should pre-load the large image when the page loads. Then you wouldn't need a "loading" image.

[blazingwolf7]

Sorry I didn't make myself more clear. Actually there is only 1 frame for the large image. Everytime a user move a mouse over to a thumbnails, the larger version of the image will be display in the frame.

Just like I said, it sometimes takes quite a while for the larger image to be loaded and its as though the webpage is not responding. That's why I would like to load another image in the server first as a respond to the user.

The remaining code:

Code: Select all

<img height="55" width="60" src="" onMouseOver="update('<%=image%>', <%=i%>, false);" style="border:1px solid black"/>

<img border="0" valign="top" width=400 height=350 id="PhotoBig" name="PhotoBig" >


[harrierdh]

I can't imagine an image taking so long to load. The only thing I can think of is a real slow internet connection would cause that or something else running in the background inside your browser.

In any event there is no real way to load two images at the same time. You could try a javascript image preload for the large image. Then put the preloaded image into the img tag with the loading image. Something like below. I can't test it because I can't duplicate the lagging behavior. And I'm not sure if javascript will keep running commands while the image is loading or if it will run one line at a time like below.

Code: Select all

<script>
funtion loadImage() {
document.getElementById("myimage").src = "loading.gif";
preload_image = new Image(2500,2500);
preload_image.src="reallybigimage.gif";
document.getElementById("myimage").src = "reallybigimage.gif";
}
</script>
<img src="thumbnail.gif" id="myimage" name="myimage" onMouseOver="loadImage()" />