The following example shows how you can listen for the httpStatus event on a Flex Image control to see if an image loaded successfully or not.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/04/detecting-whether-an-image-loaded-successfully-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.HTTPStatusEvent;
private function img_httpStatus(evt:HTTPStatusEvent):void {
switch (evt.status) {
case 200:
// Valid image, do nothing.
break;
case 404:
// Invalid image, PANIC!
Alert.show("invalid image!", evt.status.toString());
break;
default:
Alert.show(evt.toString(), evt.status.toString());
break;
}
}
private function button_click(evt:MouseEvent):void {
img.source = textInput.text;
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:HDividedBox width="100%">
<mx:TextInput id="textInput"
text="http://www.helpexamples.com/flash/images/image1.jpg" />
<mx:Button label="load image"
width="100"
minWidth="100"
maxWidth="100"
click="button_click(event);" />
<mx:Spacer width="100%" />
</mx:HDividedBox>
</mx:ApplicationControlBar>
<mx:Image id="img"
httpStatus="img_httpStatus(event);" />
</mx:Application>
View source is enabled in the following example.
{ 20 comments… read them below or add one }
I’m seeing ‘0′ returned for both found and not found images.
Steve,
According to the documentation for the HTTPStatusEvent class’s status property (whew!), you may get a status code of 0 if Flash Player cannot get a status code from your server.
Peter
Pitty…
This was a really nice solution
Yep….switch over to IE and I’m no longer pulling the dialog box / status = 0. But doesn’t this bring us to browser-specific behavior? Isn’t madness just a little way down that road?
Doesnt work ! Server returns always 0 as status code ;-( If you want to check if your image has not been downloaded use , this code by instance change the image if img.source is not available.
Hope to help you
Hey Peter!
Thanks for the detailed description of status code 0. The documentation that came with flex 2.x does not mention it in as much detail. Is there any way around it so that I could stick to firefox as the development and deployment browser?
Cheers!
Harry S.
I concur Tom. Firefox and Safari return 0 always whereas IE works as expected.
Why am I using Flex? ;)
I am having a problem with loading images.
The problem is when I change the image (same name new image) on the server in flex it still look at the old image (same name old image) until I close the application and open it up then it shows the me image.
How can I get this to show the new image without reopening the application? The user needs to see the new image loaded.
Thanks
Chaz
it is because it get the image from the cache
try to add a random number after your file url :
http://www.helpexamples.com/flash/images/image10.jpg? + (Math.random() * 10000000);
but with this solution, it will always download the file from the server, even if the image has not changed…
Thank Petere for your illuminating examples.
I do have a smaller problem than the ‘0′ being displayed that i need to tackle, I dont have an action script background but logic is a natural thing. I am trying to show an image from a node of a node of an xml list that populates a datagrid. what i want is to show the selected image. when i tried i loads just a broken link of the image. I must be missing something , any help here’s my code
private function doScan(evt:MouseEvent):void {
img.source = ‘resultGrid.selectedItem.imgpath’;
}
my xml file
2348056441978
BIOS ADMIN
Onne Field
26/04/2008
XN403ABr
../bin-debug/img1.jpg
2348034521561
BIOS ADMIN2
Sapele Deopt
26/04/2008
XN403ABw
../bin-debug/img2.jpg
With Mozilla the status cod is always 0. IE works perfectly. Is there any other way around with which we can find if the image loading is a success??? Is Flex browser specific???
Rahul,
Unfortunately, due to browser differences (ie: what the browser provides to the Flash Player), there can be subtle differences between browsers and OSes. In this case Firefox/Mozilla may not be passing the status code to the Flash Player plugin, but IE is passing the status codes to the ActiveX plugin.
Feel free to file a Flash Player bug at http://bugs.adobe.com/flashplayer/ and post the bug number here and a few of us can vote on the issue.
Peter
Hey Peter,
Not sure if we can file a Flash player bug as the problem might reside in the browser itself. Since, it works perfectly with IE. How to figure out the culprit here?
Is it Browser or the Flash Player..
Rahul
Rahul,
I would file the bug against Flash Player and if they determine the issue is with Firefox/Mozilla, they will either mark the bug as “External” and they may file a bug in the Mozilla bug base for you.
Peter
Hi, peterd. Can you also use this technique to see if the image loaded successfully?
try { myImage.load("myimage.jpg"); catch (ex:IOException) { // handle the error. }Probably not the best way according to OOP practices, though.
One caveat that I just discovered: On many browsers, the default HTTP status code of 0 is returned. From the LiveDocs for Flex 3 (http://livedocs.adobe.com/flex/3/langref/flash/events/HTTPStatusEvent.html):
If Flash Player or AIR cannot get a status code from the server, or if it cannot communicate with the server, the default value of 0 is passed to your code. A value of 0 can be generated in any player (for example, if a malformed URL is requested), and a value of 0 is always generated by the Flash Player plug-in when it is run in the following browsers, which do not pass HTTP status codes to the player: Netscape, Mozilla, Safari, Opera, and Internet Explorer for the Macintosh.
I’ve been testing on Firefox, which is a Mozilla browser. It’s returning 0 for the status always. Any workarounds for this?
Still no answer for detecting if an image is not loaded properly on other browsers??
Can’t believe I have to depend on users using Internet Explorer only!!!
Is ther a workaround?
I’ve found that the ioError Event is launched if there is a problem loading the image.
That’s enough for me to know that I need to change the image for a “Not available photo” image, and it work in Firefox, so I suppose it is not browser dependant.
Hope that helps someone with a similar problem.
I’m using
<mx:Image id="myImg" source="x" ioError="myImg.source = null"/>and it seems to work fine in both IE and FirefoxBrian – your solution seems to work for me across browsers. Thanks a lot.