flex 4 - wait for load complete without freezing

I was wondering if it is possible to implement any logic to wiat for the image to complete load without freezing.

For the sake of my app, I created a class which takes image url in constructor and loads the mx.controls.Image using the "load()" function.

See the class below

package com
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
//import flash.net.URLRequest;

import mx.controls.Alert;
import mx.controls.Image;
//import mx.utils.OnDemandEventDispatcher;

public class SpriteImage extends Sprite
{
    //Pass the source path or url here.
    private var imageUrl:String;
    private var ready:int = -1;
    private var img:Image;

    public function SpriteImage(imgUrl:String)
    {
        //imageUrl = imgUrl;
        loadImage(imgUrl);
    }
    private function loadImage(imgUrl:String):void
    {

        img = new Image();
        img.addEventListener(Event.COMPLETE,onCompleteHandler);
        img.addEventListener(IOErrorEvent.IO_ERROR,onErrorHandler);     
        //img.source = imgUrl;
        img.load(imgUrl);

    }

    private function onCompleteHandler(e:Event):void{

        img.x = -(img.width/2);
        img.y = -(img.height/2);
        this.addChild(img);
        ready = 1;
    }

    private function onErrorHandler(e:IOErrorEvent):void
    {
        ready = 0;
        //Alert.show("Can't load :" + e.toString());
    }

    public function prepare():Boolean{

        while(ready == -1){
            trace(0);
        }           
        return ready;
    }
}

}

Now, I use this class from main app like this

var img:SpriteImage = new SpriteImage(e.imageUrl);
img.prepare(); // just waits till image is loaded but freezes
var obj:DisplayObject = img;

Now the problem is that the app never comes out of the prepare() method. It freezes the browser and I have to kill the plugin process to unfreez the app.

The main cri开发者_开发问答teria here is that I need to wait for the image to complete loading so that I can access the image in the next steps. How can I do this.? Please help

Looks to me like you're creating the freeze yourself with that while(ready == -1) Why don't you just disable the ability for a user to go further in your "steps" until the image is loaded?

You don't have to synchronously wait for the image to load the way you do now. Once the image is loaded, you'll get the notification by the complete event that its loader dispatches. Then you can enable whatever depends on that image being loaded.

One straight forward way is to bind the enabled property of the navigation controls in your application to a boolean property. For example in your SpriteImage add

[Bindable] public var isImageLoaded:Boolean = false;

and set it to true once the onCompleteHandler is called. You can bind to that property's value. Another way is to dispatch an event from your class to notify others that the image is loaded and that something can happen :]

Blaze

A ProgressBar could spice up your UI in a way that it's not freezing when you load the image.

Have a look at the Adobe docs for the ProgressBar control. The paragraph titled Creating a ProgressBar control has an example which shows how to display a ProgressBar while the image is being loaded.