Best way to tell if Event.COMPLETE has already fired for an <Image> in Flex

Question

I'm looking for the best way to tell if an <mx:Image> has already fired the 'Event.COMPLETE' event. I want to do something if it has shown, or attach an event handler if it hasnt yet.

something like :

if (newBackground.percentLoaded < 100)

or

if (newBackground.content != null)

i was originally doing newBackground.content != null, but that had some cross domain issues because the sandbox wont let me access content apparently!

i'm even a little weary of using percentLoaded < 100 in case of possible race conditions.

yes i am familiar with showEffect, but that not what I want for this.

Answer 1

Have you not subscribed to the Complete Event. Or the Progress Event? Are you using a Loader? I am sure in flex you can attach Event Handlers in the markup of the image for at least the Complete and progress. The Progress will give you totalBytes and bytesLoaded.

Cheers, Andrew

Answer 2

I'm assuming you for some reason can't attach an Event.COMPLETE event listener to the Image before it starts loading. If this is the case, you could always subclass mx.controls.Image and add your own property "loadingCompleted" or "complete" that is initially false but gets set to true when the Event.COMPLETE event fires the first time.

Answer 3

There will never be a race condition on loaders in AS3 because that portion of the API is not multi-threaded. Just add your event listener before the load starts and you'll be fine. If you're using MXML, then this is all taken care of for you.

If there is some reason why you don't have control over the Image control, then the best practice would be to compare bytesLoaded and bytesTotal.

// this will not race  
if (myImage.bytesLoaded < myImage.bytesTotal)  
{  
  myImage.addEventListener(Event.COMPLETE, handleImageComplete);  
}  
else  
{  
  // it's already done, do whatever you need to with it...  
}

Answer 4

Using events is the best approach. If you have a scenario where events don't do the trick, you could monitor the contentWidth and contentHeight properties of an image control. According to the doc, "You can get the value after the updateComplete event is triggered." Before loading the value is NaN. It becomes a number once the content is loaded.

http://livedocs.adobe.com/flex/3/langref/mx/controls/Image.html