Asynchronous image loading in AS3

Question

I understand that images are to be loaded asynchronously in AS3, and that that synchronisation should be handled using events and event listeners.

So, in a simple case, it would look like this:

var loader : Loader = new Loader();
var im_file: URLRequest = new URLRequest ("imfile.png");
loader.load(im_file);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loading_complete);

function loading_complete (e : Event) : void
{ // ... do smt with your loaded data // }

What I want to do is have a PreLoader class that will load all the images I need beforehand. In that case, how do I let all the other classes know when the loading is done?

Do I dispatch events? What is the best practise in this case?

Thanks in advance,

Praskaton

Answer 1

Most likely you want to create a queue and add your image paths to the queue. Then after each image is done loading, you proceed to the next item in the queue. When all images are loaded, you dispatch a COMPLETE event or something similar to let your app know it's all done.

Check QueueLoader or Casalib for how they implement single or bulk image loading.

Answer 2

Adding to the answer that @Boon provided, this is how you could go about the actual setting up of the image queue.

Firstly, you need a list that will store all of the images that still need to be loaded. This makes it easy for you to define as many images as you want. It can be the 'queue':

var queue:Array = [
    "http://interfacelift.com/wallpaper/previews/03177_orionnebulaintheinfrared@2x.jpg",
    "http://interfacelift.com/wallpaper/previews/03175_purpleclouds@2x.jpg",
    "http://interfacelift.com/wallpaper/previews/03173_goodmorning2013@2x.jpg"
];

The next thing to do is set up what I would call the 'core' method of what we're doing. It will handle loading the next image as well as notifying us when the queue is empty. It looks something like this:

function loadNext():void
{
    if(queue.length > 0)
    {
        // Notice here that we use .pop() on the queue, which will select and
        // remove the last item from queue.
        var req:URLRequest = new URLRequest( queue.pop() );
        var photo:Loader = new Loader();

        photo.load(req);
        photo.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
    }
    else
    {
        // The queue is finished - dispatch an event or whatever you fancy to
        // let the rest of the application know we're done here.
        trace("Queue finished.");
    }
}

And then of course our listener function to deal with the completion of loaded images. Notice here that we call loadNext() - this is the key to beginning the load of the next image in the queue only once the currently loading image has finished.

function loadComplete(e:Event):void
{
    addChild(e.target.content as Bitmap);


    // Begin loading next image in the queue.
    loadNext();
}

And to start the process we of course just use this, which will either immediately notify us that the queue is finished if it's empty, or start loading the images in sequence.

// Start loading the queue.
loadNext();

---

Additional / tidy up:

If you want to be able to recycle this code or just tidy up, you can easily make this into a class. The class could be called ImageQueue and its structure will contain the above queue array, loadNext() method and loadComplete() method. It can also have an add() method for adding images to the queue initially in a cleaner manner.

Here is the foundation of that class, which you can finish up if you're interested:

public class ImageQueue
{

    private var _queue:Array = [];

    public function add(image:String):void{ }
    public function loadNext():void{ }

    private function _loadComplete(e:Event):void{ }

}