How to put loading in mootools? - mootools

Question

now i want create slideshow banner with mootools and i want to put loading image, mean after all images is loaded then start show all images (with slideshow).
My question is how to put LOADING ?
here my code :
<script type="text/javascript" src="js/mootools-1.2.4.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
/* settings */
var $xxa = jQuery.noConflict();
var showDuration = 3000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
/* opacity and fade */
images.each(function(img,i){
if(i > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});
</script>

Answer 1

have a look at the mootools-more Asset.images from Asset.js
it can load multiple images and it fires onprogress / oncomplete events for the lot. http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-images
what you do implies the images have loaded already - the load will trigger after all is done if they are in the dom - but it will wait for other elements as well as your images of interest, so that's a little wasteful
you can still create a new Element on domready saying 'loading' and destroy it onload, keep your code as is.
eg.
var loader = new Element("div", {
html: "loading..."
tween: {
onComplete: function() {
this.element.destroy();
}
}
}).inject(document.id("sometarget"));
...
window.addEvent('load', function(){
loader.fade('out'); // will fade and destroy it.
interval = ...
});