Detecting whether an image loaded successfully in Flex at Flex Examples

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.

View MXML

<?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.

November 2007
M	T	W	T	F	S	S
« Oct		Dec »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

November 2007

« Oct

Dec »

10 Responses to “Detecting whether an image loaded successfully in Flex”

Feed for this Entry View blog reactions

1 Steve Nov 4th, 2007 at 1:29 pm

I’m seeing ‘0′ returned for both found and not found images.
2 peterd Nov 4th, 2007 at 2:47 pm

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.

If Flash Player 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 ActionScript 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.

Peter
3 Tony Fendall Nov 4th, 2007 at 3:48 pm

Pitty…
This was a really nice solution
4 Steve Nov 6th, 2007 at 4:57 am

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?
5 Tom Nov 20th, 2007 at 6:31 am

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
6 Harry Jan 20th, 2008 at 6:00 pm

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.
7 Kris Feb 13th, 2008 at 8:36 pm

I concur Tom. Firefox and Safari return 0 always whereas IE works as expected.

Why am I using Flex? ;)
8 Chaz Feb 19th, 2008 at 2:16 pm

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
9 rod Apr 18th, 2008 at 2:10 am

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…
10 That Akwuzu Bwai May 3rd, 2008 at 5:05 am

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