Mootools image preloader - make it disappear after load complete.

Question

Im using a preloader to load large images before I display them.. I am using this script:

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

I want to make it disappear when it reaches 100% loaded. I have modified the script by adding

progressBar.set(0);

to the onComplete function at the bottom of the page. However, now the loader just fails to appear at all. How do I get the loader to disappear when it reaches 100%? Any ideas? Here is the rest of the script:

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

you could always do:

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

Answer 2

Dispose the element holding the progress-bar itself should work:

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

So you can reuse it later. Or hide it by

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

Answer 3

I think you may have a wrong expectation of David Walsh's image preloader. It does not show progress as an individual image is downloading, rather updates based on the percentage of an image set which has downloaded (ie 3 of 7 images rather than 20% of 1 image). So what you are getting is 0 progress initially then (1 of 1 or 100%) progress when the 1 image has been downloaded.