Ajout d'une image de chargeur pendant le chargement de l'image dans flex

Question

Je dois créer une galerie pour charger des images et les afficher. Cette partie est bien :

/**    
 * @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);
    }
}

où imgMain est l'identifiant du composant image.

Mais, j'ai besoin d'un petit coup de pouce. Une image de transition, c'est-à-dire une image de chargement, doit être affichée pendant le chargement de l'image. Aidez-moi, s'il vous plaît.

Answer 1

C'est assez facile à réaliser. Je vous suggère de procéder de cette façon. Créez un Sprite 'imageHolder' pour votre image de chargement et ajoutez-le à la liste d'affichage. Ajoutez un écouteur pour Event.INIT sur votre loader.contentLoaderInfo, puis lorsque le chargement est terminé, supprimez votre image de chargement et ajoutez le loader.content à votre 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);
}