AS3 - Unordered XML IMG loading

Question

Hello,

I have this code that loads thumbs and full images in my project:

private function processXMLHandle(e:Event):void
 {
  var xml:XML = new XML(e.target.data);

  for each (var line:XML in xml.IMAGE)
  {
   var file:String = line.@THUMB;    

   var loader:Loader = new Loader();
   loader.load(new URLRequest(file));

   loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

   var fileFull:String = line.@FULL;

   var loaderFull:Loader = new Loader();
   loaderFull.load(new URLRequest(fileFull));
   loaderFull.contentLoaderInfo.addEventListener (Event.COMPLETE, completeFullHandler);

  }

  myXMLLoader.removeEventListener(Event.COMPLETE, processXMLHandle);
 }

When I push the array I'v created for that, the images comes in an unsorted order.

I friend of my told me that It's happening something like that: "the small files are comming first". He told me that the problem is with the loader, but he can't help-me.

Can anyone tell-me what's wrong?

Thanks!

Answer 1

It looks like you are looping through a given XML document that contains a list of images and loading the images asyncronously in a loop. In doing that, obviously the smaller images are going to finish first causing the Event.COMPLETE event to fire. This happens because you are asking flash to start loading all the images immediately and concurrently.

What you may want to do is instead load up the images synchronously in a loop by first loading the first image...when that images Event.COMPLETE executes, continue to load the next image and so on until they are all done. Doing this, will force your application to load the images in the order defined in the XML and one at a time sort of like a queue.

Good luck!

Answer 2

The best way to approach this is with a bit more structure to your code.

First, create a class (let's call it ImageLoader) responsible for loading both the thumb and the full image. This would be a class with 2 Loader instances. Create an instance of this class for each item, and push them into an array before you start.

Once the array is full, iterate the array instructing the ImageLoader instances to start. This method would in turn call the load method of each one of its Loader instances.

Once both the Loaders have completed, emit a custom ImageLoaderComplete event indicating that it is complete.

At a higher level, in the same class as contains the array of ImageLoader instances, listen for the custom event emited from each of the ImageLoader instances. Count them in. When you've counted as many as there are items in the array, loading is complete, and your array remains in the same sequence as when you started, with the thumb and full image conveniently grouped.