Width/Height of dynamically loaded Image

Question

I've been struggling with this problem for far to long now, and I'm guessing the solution is quite easy.

In my Flex application, I've got a component that extends UIComponent where I'm loading images at runtime and try to display them. I've tried lots of different approaches (using beginBitmapFill(), using different containers), but I can't get things to work as I want. The problem seems to be related to the width and height properties of the image, which aren't updated correctly. The idea is:

var sprite:Sprite = new Sprite();
addChild(sprite);

var im:Image = new Image();
im.addEventListener(Event.COMPLETE, function(e:Event):void {
    sprite.addChild(im);
}
im.load('path/image.png');

The image's width and height doesn't seem to be correct when it's loaded. I get width==0 (and nothing is displayed), but the property $width seems to be correct. How can I assure that width and height of the loaded image is updated?

Answer 1

try it with Event.INIT instead of Event.COMPLETE

Answer 2

This is a timing problem, and imho a bug in the image class, because the image class breaks the expectations of the users.

The thing is, the image class first does the downloading (and eventually dispatches COMPLETE), and then does the measuring (and scaling) and then updates the values correctly (resulting most of the time in another UPDATE event).

So when I first stumbled upon this problem, my solution was to first listen to the COMPLETE event, then add a listener to UPDATE (you can't just listen to update because this usually will be dispatched at least once during creation or download), but this is rather a bad hack.

I'm quite sure this question has been answered before on stackoverflow, and there probably were better solutions.

PS: also beware of the difference between width and contentWidth, just to be sure :)