Discuss: Best way to load?

[dudewad]

Hey all,
I've been doing a lot of thinking about how best to construct classes that load multiple images, e.g. photo galleries and such.

What is everyone's take (or the general agreement, if there is one) on how to load those images? The 2 ways I am thinking about are these (after you've already got all the filepaths or urls to be loaded):

1)
Create a for loop:

var loader:Loader;
(etc...)

for(var i:uint = 0; i < filePathArray.length; i++)
{
     loader = new Loader();
.......
}

Here, you are creating anywhere from one to a billion loaders, depending on the number of photos in your gallery, but they will load simultaneously. Is that a terribly bad approach?

The only other way I know of doing it is to add an event listener that re-calls the loading function when the loading of one image completes. What does everyone think/know to be true? I'm interested in best practices.....


Thanks!!

[cancerinform]

You will run into problems. Use the Timer class to create Loaders to allow time to load the images.

[fx.barrett]

Personally, I'd simply go with recursion. I would have a method that gets as an argument an index ( assuming that you store the paths to all your image in an Array ). I'd start the loading by calling the method and by default, the index should be 0 so it loads the first image. Obviously, you'd have a Complete listener for your loader to know when the image has been successfully loaded, once the Complete handler is triggered, I'd increment the index value ( obviously, I'd first check to see if the incremented index is out of bounds so I don't pass by accident an index that does not exist in the Array holding the paths ) and I'd call the method that loads the next image ( because we now have a new index ) and so on. In the complete handler, you'd also check if the index has reached the end of the array, if it did, you should stop the loading.

That would be a "general explanation", you can complicate stuff more if let's say you only want 6 or 10 images to load and not all... like having pages, the first page only has 10 images, the second page again 10, and maybe the third page only 4... then you'll have to add additional conditions and stuff but the indexing idea should still be the same.

I'm not saying that this is the best solution out there but from my point of view it's quite "logical" and I don't see why would it be bad.

The only other way I know of doing it is to add an event listener that re-calls the loading function when the loading of one image completes. What does everyone think/know to be true? I'm interested in best practices.....

Heh, didn't see you mention the same thing in your post. Regarding the "load everything at once"... not sure, I'd definitely mark it as a "less better approach" than the "load the next one only when the previous has finished loading" but for small projects where we're talking about tiny thumbs, it might not be too bad. Still, I'd go with the load one by one approach.

[dudewad]

Yeah I agree. I was just wondering about it. I think i saw a thread once where somebody had created the first loop type (where it makes a loader for each image), and the guy replied saying something like
"it works fine, but you dont need to loop through creating a sh*tload of loader like that..."

Which occurred to me that overall load time probably wouldn't change, because you're still loading the same number of bytes, but memory usage would drop in option 2 because you're using one loader, and just reusing it using the .unload dealy assuming it's not the first image.

Thanks for the contribution... it's always nice to have reinforcement when you're self teaching! ahha....

[dudewad]

but cancerinform.. could you elaborate what you mean? Assume you make a timer that is shorter than the load time. What then? Because you'll still be doing 2 things that set off bells in my head:

1. creating more than one loader
2. having simultaneous loading

The second option isnt bad, but I try to think in terms of memory.

Also, if the timer is too long, you will be waiting around for no reason at all. Of course, we're talking portions of a second here, which really doesn't matter... but just for theory's sake.
What exactly are you meaning by the timer idea? I've never thought about it that way...

[5TonsOfFlax]

First thing to do when you tackle a new problem is to see if someone has already given you the solution.

http://code.google.com/p/bulk-loader/

I've not used bulk-loader personally, but it does seem to have good word of mouth.

[fx.barrett]

First thing to do when you tackle a new problem is to see if someone has already given you the solution.

Maybe because "you can" and second of all, the satisfaction is not the same. It's ok if you use the stuff someone else put together just "to get the job done" but you really not learning from all that. And just because someone threw together something that seems to work does not mean that his solution is good nor efficient.

As a programmer, I'd rather give it a shot with my ideas than limit myself to the stuff I can find on the internet ( obviously, I'm not saying that we must ignore the stuff other do because from certain examples, one can learn a few tricks ).

@ dudewad: Nah, I wouldn't go with the loop mainly for the reasons you already mentioned ( same applies to the Timer ) and let's not forget one more thing: who said that the user will actually wait until everything is loaded? So why kill his GPU or eat up his memory when he might have clicked on the "Gallery button" by accident... why instantiate 100 Loaders when he might only be interested in the 3rd photo?

[dudewad]

ooh... an interesting point at that! It hadn't occurred to me to load one photo AND ADD IT TO THE STAGE at a time. What I've been doing is loading them all one at a time, and adding them to an array, and then adding them to the stage w/ a loop.

But I guess I've been doing that because I use a pretty fade in that would lose effect if there were only part of the gallery to fade in to! hah... I think I'll see what can't be done with this one image dealy... itd be very pretty as well to have each one have a one-pixel thick loader image underneath it... like on www.in2media.com, how their loaders go diagonally. It's pretty :P

Thanks!

[cancerinform]

I did not know you are looking for Preloader. I thought you meant loading the images for a slideshow. Of course you create only one Loader. The main point with for loops is that loading of images are just skipped and you see sometimes a ball on screen rolling. The fact that you have a COMPLETE handler dos not make any differences. Therefore, I always use a Timer for external Loading. It's a bit slower.

Here is an example for multipreloader.
http://board.flashkit.com/board/show...02#post4160102

[mgason]

I do use the
http://code.google.com/p/bulk-loader/
I think I got it after a recommendation from 5TonsOfFlax
It is an open source project, very powerful, very intelligent.

You can..
load things sequentially, or all at once.
manage the number of open connections.
show an accurate preloader for each item or the complete group of files.
set up the files to load sequence in an xml file
and lots more

Worth a look even if you want to write your own.

mark

[dudewad]

No no, I think people are missing the point.
I'm not "looking" for anything. The title of the post is "Discuss:....."
This was meant as more of a discussion on what people think works best method wise. Though I appreciate the loader downloads, I'm more trying to be a bit more critical in asking the "why" and "how" rather than the "give me an answer".

Still, I'll take a look at the source of that loader and see if I can't see what these guys do.

Cancerinform-- Now I see what you mean... you mean set a timer AFTER the loader finishes, and when that expires, load the next image. I was wondering where we got lost in translation haha...

Thanks!