Adding loader image while the image is loading in flex

Question

I need to create a gallery to load images and display them. This part is fine:

/**    
 * @variable image_name to store the name of the selected item
*/      
private function showimage(evt:Event):void
{
    // to store the name of the selected image
    var image_name : String = evt.currentTarget.selectedItem.img_name;

    // checks if any item is clicked
    try
    {
        if(image_name == "")
        {
            throw new Error("No image selected from the list");
        }

        // supplying the image source for the Image imgmain
        // also supplying the height and width for the image source  
        imgMain.source = siteurl + image_name.toString(); 

    }
    catch(err:Error)
    {
        Alert.show(err.message);
    }
}

where imgMain is the id the image component.

But, I need a small twist. A transition image i.e. loading image should be displayed while the the image is being loaded. Plz help me out.

Answer 1

Hi Roshan,

This is quite easy to achieve. I would suggest going about it this way. Create an 'imageHolder' Sprite for your loading image and add it to the display list. Add a listener for Event.INIT on your loader.contentLoaderInfo, then when the load is complete you remove your loading image and add the loader.content to your imageHolder.

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

// add your loading image to the _imageHolder
_imageHolder.addChild(new LoadingImage()); // exported in your library?

var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoadComplete);
_loader.load(new URLRequest('path to assset'));

// image has loaded so remove the display image and add the content
function _onLoadComplete(e:Event):void{
    _loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, _onLoadComplete);
    _imageHolder.removeChildAt(0);
    _imageHolder.addChild(_loader.content);
}