Question

现在我想创建带有mootools的幻灯片横幅，我想要加载图片，意味着加载所有图像然后开始显示所有图像（使用幻灯片）。

我的问题是如何加载？

这里是我的代码：

<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

看看来自Asset.js的mootools-more Asset.images

它可以加载多个图像，并触发该批次的进展/不完整事件。 http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-images

你所做的事情意味着图像已经加载了 - load如果它们在dom中就会触发它们 - 但它会等待其他元素以及你感兴趣的图像，所以这是一个有点浪费

你仍然可以在domready上创建一个新的元素'load'并销毁它onload，保持你的代码不变。

例如。

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

如何装载mootools？

1 个答案: