Предзагрузчик изображений Mootools - заставляет его исчезать после завершения загрузки

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

Я думаю, вы можете ошибочно рассчитывать на загрузчик изображений Дэвида Уолша. Он не показывает прогресс при загрузке отдельного изображения, скорее обновления, основанные на проценте загруженного набора изображений (т.е. 3 из 7 изображений, а не 20% от 1 изображения). Таким образом, вы получаете 0 прогресса изначально, затем (1 из 1 или 100%) прогресс, когда 1 изображение было загружено.

Answer 2

Удалите элемент, содержащий сам индикатор выполнения, должно работать:

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

Так что вы можете использовать его позже. Или скрыть это

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

Answer 3

вы всегда можете сделать:

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