Asset.image Question

Hello!
I would like to load an array of images with mootools. Normally that's no problem using assets.images. But now i would like that the images load one after another. When one image is load it should be displayed an the next images should start to load. A kind of chain.

Thanks a lot for you help!!!

Load the first using Asset.image and in the onComplete event for that image load the next.

This function is a handy wrapper for it:



The function takes an array of image sources, a function to execute when the images are all loaded, and a function to execute if there is an error loading (so you don't wait forever for broken things to arrive)

You can use it like this (example that works)


Here's an example using the error callback as well (I'm using console.error as the callback, but obviously you can use your own function!)

Thanks so a lot adamnfish!! Your are my hero!
It works really great. One question: What happens when the image could not be loaded (=> onerror)? Does it load the next image or not? Should i put into the onerror function also loadImage(i + 1); ?

One more thing:
When the image is loaded, the function showImage() is called. It puts the image into a div. Then it appears with a morph opacity effect. Now my last question is: I would like to chain the morph functions. When the image is loaded the morph effect should wait until the morph effect of the last image has finished.
Now i have code like that.