Flex Examples

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>