View Full Version : Capturing failed image load event

3 Feb 2010, 12:50 PM
Howdy Ext folks!

I've got an application (http://mesonet.agron.iastate.edu/timemachine/) I wrote that navigates over a http based archive of images with predictable file names based on the image's valid timestamp (think online archive of webcam images). My Ext foo is probably poorly on display there :) , anyway my question:

Via the time controls, I change the displayed images automatically via a simple:

Ext.get("imagedisplay").dom.src = uri;

The problem is that sometimes that URL generated may not exist on the server (data outages in time) (404 error). How can I detect from Ext when these image load failures occur and provide the user some kind feedback on this error, pop up panel or something nice :)


27 Mar 2010, 6:39 PM
Still am stumped :(( Any kind souls out there take pity on me? :)

27 Mar 2010, 8:39 PM
Hi daryl,

You could wrap the "...src = uri" line with something like this:

url: uri,
success: function(){ Ext.get("imagedisplay").dom.src = uri },
failure: function(){ Ext.Msg.alert('','No data is available based on current selections.') },

You might want to create an image containing the text mesage to be displayed when you get a 404 and then set the src to that image rather than displaying the pop up for the failure function.

29 Mar 2010, 4:16 PM
Thank you for the reply. Unfortunately, I need to pull images from all over the web, so I'd have to proxy it all to get around cross domain ajax. It appears to be my only option though.


29 Mar 2010, 4:55 PM
One significant consequence of the OBJECT element's design is that it offers a mechanism for specifying alternate object renderings; each embedded OBJECT declaration may specify alternate content types. If a user agent cannot render the outermost OBJECT, it tries to render the contents, which may be another OBJECT element, etc.

In the following example, we embed several OBJECT declarations to illustrate how alternate renderings work. A user agent will attempt to render the first OBJECT element it can, in the following order: (1) an Earth applet written in the Python language, (2) an MPEG animation of the Earth, (3) a GIF image of the Earth, (4) alternate text.

<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
The outermost declaration specifies an applet that requires no data or initial values. The second declaration specifies an MPEG animation and, since it does not define the location of an implementation to handle MPEG, relies on the user agent to handle the animation. We also set the type attribute so that a user agent that knows it cannot render MPEG will not bother to retrieve "TheEarth.mpeg" from the network. The third declaration specifies the location of a GIF file and furnishes alternate text in case all other mechanisms fail.

There is a specification for all to ponder (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2). That doesn't mean it's going to work in your browser at 9:00 am while your pouring coffee from your left hand, but it's an idea...

3 Apr 2010, 7:11 PM
The onError event of the image object might be the ticket. It fires on 404s.

Ext.get("imagedisplay").dom.onerror = function(){alert('Image not found.')}

6 Apr 2010, 4:31 AM
The onError event of the image object might be the ticket. It fires on 404s.

Ext.get("imagedisplay").dom.onerror = function(){alert('Image not found.')}

Thank you! \:D/