Load images in the background using Flex

Question

Hey guys,

In my Flex application I call a web service that returns a few dozen "items" where each item has an associated image url. I create a model based on this data and bind the image components source property to the url string.

I'd like to have more control over the loading of these images, particularly the order in which they are loaded. I'd also like to preload images that aren't necessarily bound to components yet. Essentially I'd like to load the images the user will see first, then load images in the background that they may see later.

Is there a mechanism in Flex I can utilize to load images in the background?

Answer 1

To the best of my knowledge, there isn't an out-of-the box mechanism, no, but you can always just load up the images on a Timer somehow, with URLLoader, to retrieve and stash the bytes of each image until you need them. Depending on how your model's set up (e.g., you could store each image as a ByteArray in an ArrayCollection, for example), it ought to be a relatively straightforward thing to do. Does that help?

Answer 2

Put the files in a queue and load them one after each other. Flex (the framework) won't do this for you but you can relatively easily write your own in AS3.

Personally i use my own solution for this but there's a bunch of available existing solutions for this too; the most common probably being Bulk Loader.

Answer 3

I created a mechanism to read a list of URL's from an XML file and load them in the background or on demand (whichever comes first). The pre-load just loads the image and DOES NOTHING WITH IT; it depends on the browser cache to hold that image until the UI does a "load" and return it instantly.

GalleryImageItem.status is more for debugging than anything else. The UI does not know anything about the preloader (and does not have to coordinate with it).

Cheers

         private var BackgroundLoaderIndex : int = -1;
         private var BackgroundImageLoader : Loader = null;         

         private var GalleryCanvasIndex : int = -1;          
         private var BackgroundGalleryLoadTimer : Timer;

      [ArrayElementType("GalleryImageItem")]
         private var GalleryImageArray : Array =  new Array();

     private function Initialize(event : Event) : void
     { 
      LoadGalleryImageArray();   

      BackgroundGalleryLoadTimer = new Timer(4000);
      BackgroundGalleryLoadTimer.addEventListener(TimerEvent.TIMER, BackgroundGalleryLoad);
            BackgroundGalleryLoadTimer.start();
     }

     private function LoadGalleryImageArray() : void
     {   
      var Galleries : XMLList = PageTextsXML.elements("Gallery").elements("GalleryImage");  

      for (var counter : int = 0; counter 

---

    package com.santacruzsoftware.lib
    {
        public class GalleryImageItem extends Object
        {
         public static const UNLOADED : int = 1; 
         public static const PRELOADING : int = 2; 
         public static const PRELOADED : int = 3; 
         public static const PRELOAD_FAILED : int = 4; 
         public static const LOADING : int = 5; 
         public static const LOADED : int = 6; 
         public static const LOAD_FAILED : int = 7; 

         private var _resourceName : String;
         private var _detailResourceName : String;
         private var _caption : String;
         private var _status : int;

         public function GalleryImageItem(aResourceName : String = "", aCaption : String = "", aDetail : String = "")
         {
          super();

          _resourceName = aResourceName;
          _caption = aCaption;
          _detailResourceName = aDetail;
          _status = UNLOADED;
         }

         public function get detailResourceName() : String{ return _detailResourceName }
         public function set detailResourceName(value : String) : void { _detailResourceName = value }
         public function get resourceName() : String{ return _resourceName }
         public function set resourceName(value : String) : void { _resourceName = value }
         public function get caption() : String{ return _caption }
         public function set caption(value : String) : void { _caption = value }
         public function get status() : int { return _status }
         public function set status(value : int) : void { _status = value }
        }
    }