Actionscript: How Can I Know When The Source Property Of An Image Is Completely Updated

Question

var I:Image=new Image();
I.source='C:\\Abc.png';
var H:int=I.height;

H is always Zero!

I am presuming this is because the image hasn't finished reading the png file off the disk yet.

What event can I monitor to know when it's width and height will have the right values?

The 'Complete' event only seems to work for DOWNLOADED images. The 'Render' event happens EVERY FRAME. The (undocumented?) 'sourceChanged', happens as soon as source changes, and has the same problem!

What event do I watch that will let me know when the image's width and height properties will have valid values? Or is there some Synchronous version of I.source='xxx.png', that I don't know about?

P.S. Yes, I know I shouldn't use "C:\" in an Air Program. This was just for illustrative purposes, so that you won't suggest I use "Complete", which never even seems to fire when the file indicated by source is local.

Answer 1

First, sourceChanged is the event used for binding. Every Bindable property has something a similar property.

Complete should fire when loading local files--according to docs anyway. I would expect it to fire very quickly on a local file, however, I would expect a delay between loading a file and when that content is added to a parent, positioned, and sized. That delay is why height and width are not immediately available.

I can see a few different approaches. First you need to take a look at the Flex Component LifeCycle and override updateDisplayList() to let you know when the item (I suspect contentHolder) is sized.

Second might be to override contentHeight or contentWidth so that they dispatch said Bindable events for height and width.

Third, is to override the doScaleContent method; which appears to be where the height and width of the contentHolder are set.

Take your pick. I'm not sure what your use case is; so can't elaborate more.

Answer 2

var I:Image=new Image();
I.addEventListener(Event.COMPLETE, imageIsLoaded);
I.source='C:\\Abc.png';

function imageIsLoaded(event:Event):void
{
    // ...
}

Answer 3

And the winner is... "resize". The resize event fires as soon as the image size changes (from 0,0). As soon as resize fires, then the width and height are accurate.

Answer 4

Hi,

Try to use the following code

    protected function init():void
    {
        var loader:Loader = new Loader();
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);            
        loader.load(new URLRequest('http://timeister.com/image.png'));
        return;         
    }

    protected function displayImage(event:Event):void
    {
        var loader:Loader = (event.target as LoaderInfo).loader;
        myImage.data   = loader.content;
        myImage.width  = loader.width;
        myImage.height = loader.height;
        this.height    = myImage.height;
        this.width     = myImage.width;
        this.visible = true;
        return;         
    }