Question

我使用预加载器在显示之前加载大图像..我正在使用这个脚本：

http://davidwalsh.name/mootools-image-preloading-progress-bar

我希望它在达到100％加载时消失。我通过添加

修改了脚本

progressBar.set(0);

到页面底部的onComplete函数。但是，现在加载器根本无法出现。当达到100％时，如何让装载机消失？有任何想法吗？这是脚本的其余部分：

window.addEvent('domready', function() {

    var progressBar = new dwProgressBar({
        container: $('progress-bar'),
        startPercentage: 0,
        speed:750,
        boxID: 'box',
        percentageID: 'perc',
        displayID: 'text',
        displayText: false
    });


    var images = ['http://designvillain.com/logo_big3.jpg'];
    var loader = new Asset.images(images, {
        onProgress: function(counter,index) {
            progressBar.set((counter + 1) * (100 / images.length));
        },
        onComplete: function() {
            images.each(function(im) {
                new Element('img',{ src:im, style:'' }).inject($('images-holder'));

            });
        }
    });
});

Answer 1

我认为你可能对大卫沃尔什的图像预载器有一个错误的期望。它不会在单个图像下载时显示进度，而是基于已下载的图像集的百分比（即7个图像中的3个而不是1个图像的20％）进行更新。因此，当你下载1张图片时，你得到的是0进度，然后是1（1或100％）进度。

Answer 2

你总能做到：

$("progress-bar").empty();
// or .dispose(); or .destroy();

Answer 3

处理持有进度条本身的元素应该起作用：

bar = $("progress-bar").dispose()

所以你以后可以重复使用它。或者隐藏它

$("progress-bar").setStyle('display', 'none');

Mootools图像预加载器 - 使其在加载完成后消失

3 个答案: