Как поставить загрузку в mootools?

Question

Теперь я хочу создать баннер слайд-шоу с mootools, и я хочу поставить загрузочное изображение, то есть после загрузки всех изображений, затем начать показывать все изображения (со слайд-шоу).

У меня вопрос как поставить LOADING?

вот мой код:

<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

посмотрите на mootools-more Asset.images из Asset.js

, он может загружать несколько изображений и запускать события onprogress / oncomplete для лота.http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-images

то, что вы делаете, подразумевает, что изображения уже загружены - load сработает после того, как все будет сделано, если они находятся в DOM, - но будет ожидать других элементов, а также ваших изображений, представляющих интерестак что это немного расточительно

вы все равно можете создать новый элемент на domready, говоря «загрузка» и уничтожить его при загрузке, сохранить ваш код как есть.

например.

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 = ...
});