l'image Mootools préchargement - faire disparaître après le chargement complet

Question

Im en utilisant un préchargement pour charger de grandes images avant de les afficher .. Je suis en utilisant ce script:

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

Je veux le faire disparaître quand il atteint 100% chargé. Je l'ai modifié le script en ajoutant

progressBar.set(0);

à la fonction onComplete au bas de la page. Cependant, maintenant le chargeur ne parvient tout simplement pas à apparaître. Comment puis-je faire disparaître le chargeur lorsqu'il atteint 100%? Des idées? Voici le reste du 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

Je pense que vous pouvez avoir une mauvaise attente du préchargement d'image de David Walsh. Il ne montre pas de progrès lorsqu'une image individuelle est en cours de téléchargement, mais plutôt des mises à jour basées sur le pourcentage d'un ensemble d'images qui a été téléchargé (c'est-à-dire 3 sur 7 images plutôt que 20% sur 1 image). Donc ce que vous obtenez est 0 progrès au début puis (1 de 1 ou 100%) progrès lorsque l'image 1 a été téléchargée.

Answer 2

vous pouvez toujours faire:

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

Answer 3

Dispose l'élément tenant la barre de progression lui-même devrait fonctionner:

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

vous pouvez donc réutiliser plus tard. Ou cachez-le par

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