Preload Image and Give error if Image is Unavailable 4

[rudy23]

I am sure this can be done in Javascript but am not finding the right way to do it. My page has an image in it which actually is an external url calling the image froma remote server. Now this image gets updated frequently in its location and hence sometimes I get an error or the red cross showing image not available.

Is there some way I can preload the image on the page and display it only if it has sucessfully downloaded or else show a different error image in its place telling users to try again.

Any other ideas on how I can do error handling with loading an image on a page i.e show image if successfully downloaded or display error image in place.

One more thing I wanted to add is that the image has an image map with an href over it allowing users to update the image data without reloading the whole page. So users might do multiple clicks on that image.

Any help is greatly appreciated.

Thanks

 

[BillyRayPreachersSon]

Some browsers support both the onload event and the onerror event for image tags, some only support onload, and some support neither.

For this reason, any client-side solution will not be guaranteed to work on all browsers / platforms.

It's possible that a JSP / ASP server-side solution could detect for the presence of the image 100% of the time, but I'm guessing you want to keep this client-side.

If you do decide to go with the client-side solution, try adding something like this to your image tag to experiment:

<img src="whatever.gif" onerror="alert('Error loading image');" onload="alert('Image loaded OK');">

Hope this helps,
Dan

 

[glenmac]

A star for you Dan I didn't know about the onerror handler. Just a little change to Dans code, it removes the image completely if it's not available so you don't get hte little red x. ;-)

<img src="whatever.gif" onerror="[COLOR=red]this.style.display='none';[/color] alert('Error loading image'); " onload="alert('Image loaded OK');">

Glen

http://lantzvillecomputers.ca

 

[rudy23]

Hey Billy

sorry for the late response but that works perfectly for me. I only care about IE and Netscape and havent seen any problems at all. Thanks a tonne again.

Hey gelnmac thanks for you suggesstion too. Pretty useful. Do you know if i can display an alternate image instaed of none?

thanks

 

[BillyRayPreachersSon]

>> Do you know if i can display an alternate image instaed of none?

This should do the job for you:

<img src="whatever.gif" onerror="this.src='errorImage.jpg';">

You can even have a different sized error image (for where you have specified a width and height):

<img src="whatever.gif" onerror="this.src='errorImage.jpg';this.width=50;this.height=50;" width="100" height="100">

Hope this helps,
Dan

 

[rudy23]

One last question

Our site is being monitored by Keynote which detects if there is a hit to the site and reduction in availability. If I use onerror will I see a hit in availability or no.

Also a lot of times the image is not displayed because of a timeout. When does onerror kick in? does it wait for the timeout to happen or immediately when the page loads?

Let me know

thanks

 

[BillyRayPreachersSon]

I'm not sure about the Keynote question - you might have to ask their tech support people that one.

Regarding the timeout issue, as far as I know, the onerror event will fire immediately if the image is not found, not fire at all if the image is found, and (this is the gueswork part ;o) will fire after a timeout (I've not tested this, but logically it would make sense to me).

Hope this helps,
Dan