Preventing an image from automatically loading in an Image control in Flex

The following example shows how you can prevent the Flex Image control to automatically loading an image when setting the Image control’s source property by setting the autoLoad property to false and then explicitly loading the image using the load() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/preventing-an-image-from-automatically-loading-in-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Load Image"
                click="img.load();" />
    </mx:ApplicationControlBar>

    <mx:Image id="img"
            autoLoad="false"
            source="assets/Fx.png"
            maintainAspectRatio="true"
            percentWidth="100"
            percentHeight="100" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/29/preventing-an-image-from-automatically-loading-in-an-image-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Button;
            import mx.controls.Image;

            private var btn:Button;
            private var img:Image;

            private function init():void {
                btn = new Button();
                btn.label = "Load Image";
                btn.addEventListener(MouseEvent.CLICK, btn_click);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(btn);
                Application.application.addChildAt(appControlBar, 0);

                img = new Image();
                img.autoLoad = false;
                img.source = "assets/Fx.png";
                img.maintainAspectRatio = true;
                img.percentWidth = 100;
                img.percentHeight = 100;
                addChild(img);
            }

            private function btn_click(evt:MouseEvent):void {
                img.load();
            }
        ]]>
    </mx:Script>

</mx:Application>

One thought on “Preventing an image from automatically loading in an Image control in Flex

  1. Hi, interesting demo.

    You know, I have a flex application where I want it to be shown once all images are loaded. Right now, the application executes, then it shows the main screen, and then the images starts showing up as they are loaded in the background (using autoload=true).

    Is there any way, the application shows itself, once all these images are loaded.

    The images are the skin of the application.

    Regards,

    Joe.

Comments are closed.