Ways to load images in AS3

Question

How to load images in as3:

1. Load them all at once, for example like this (pseudo as3 code):

   for each (var url:String in images){ loader.load(url); }

2. Or to load them one by one (again, pseudo code):

   loader.load(images.shift())

   onComplete(){ loadNext(images.shift()); }

Which way is faster and better for performance?

Answer 1

This question doesn't have a simple answer.

When Flash loads a file (in a browser) it depends upon the browser to manage the http transaction, caching, etc. If you have only a few images and they aren't too big, the first method is easier to program, and you can depend upon the browsers http loading queue to manage the files.

If you have many files (tens and tens) of them, staggering it in some fashion may be better in a number of ways. First of all, every object creation is quite expensive, in the case of a loader you will end up attaching event listeners to it, and possibly even display a loading animation. This is quite expensive and will slow Flash down decreasing the responsiveness of your application. Secondly by staggering them you are in explicit control of what is loaded when, rather than depending on the browsers http implementation. For example, you can then ensure the items that are going to be accessed first by the user are loaded first.

In the case of much larger files (lets say hundreds of kilobytes) you can load one after the other which results in not starving the users bandwidth. This allows for some form of result quicker than perhaps waiting for four (a usual concurrent limit) hundred kilobyte files to download in parallel.

The strategy you choose really depends on what you are trying to make and I think ultimately is too ambiguous for this forum.

Another thing to note is, the second method isn't very robust in the case of the download failing.

Answer 2

Second way seems much better. If there are hundreds of images to load then in the first approach, all the image requests will be fired almost at the same time making browser almost unusable and loading of first image can take quite longer because of parallel requests (bandwidth will then be shared) than the second approach. But overall loading time (i.e. number of images * avg time to load a single image) will be lesser in the first way. The best thing would be to use a hybrid of these approaches. Load MAX_NUMBER of at any time which means start loading images till MAX_NUMBER of image loading operations are in progress. And as soon as a loading operation completes start loading a new one. Following is the rough approach. loadimages needs to called after fixed time interval may be 100 ms. And MAX_NUMBER can be 20 or so.
function loadimages(){
while(count < MAX_NUMBER) {
loader.load(images.shift);
count++;
}
}
onComplete() {count--;}
onFail(){count--;}
setIntarval(loadimages, 100);

And primarily it depends how your application using images i.e. all the same time or may a subset of them at any given point of time.