Comment afficher l'état de chargement avec le préchargeur et plusieurs images?

Question

Je construis un diaporama avec quelques centaines d'images et je voudrais construire une belle barre de chargement, donc l'idée était de précharger les images en utilisant JavaScript, puis d'initialiser le reste de l'interface utilisateur.

Le préchargement des images n'est pas un problème, mais le navigateur doit mettre à jour l'état en cours de chargement. J'ai essayé quelques choses, mais le navigateur ne repeindra l'affichage qu'après qu'il a fini.

J'ai même essayé le script de this question, mais j'obtiens le même résultat.

Voici ce que j'ai jusqu'à présent (imglist est un tableau de noms de fichiers que je utilise Prototype..)

var imageBuf = [] 
var loadCount = 0 
$('loadStatus').update("0/"+imgList.length) 

function init() { 
    imgList.each(function(element){ 
     imageBuf[element] = new Image() 
     //imageBuf[element].onload = window.setTimeout("count()",0) // gives "not implemented" error in IE 
     imageBuf[element].onload = function(){count()} 
     imageBuf[element].src = "thumbs/"+element 
    }) 
} 

function count() { 
    loadCount++ 
    $('loadStatus').update(loadCount+"/"+imgList.length) 
} 

init() 

Answer 1

Essayez d'utiliser la fonction de my answer to this question:

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) { 
    var itemIndex = 0; 
    (function() { 
    var remainingDataLength = (data.length - itemIndex); 
    var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength; 
    if(itemIndex < data.length) { 
     while(currentChunkSize--) { 
     workerCallback(data[itemIndex++]); 
     } 
     setTimeout(arguments.callee, timeout); 
    } else if(completionCallback) { 
     completionCallback(); 
    } 
    })(); 
} 


// here we are using the above function to take 
// a short break every time we load an image 
function init() { 
    incrementallyProcess(function(element) { 
    imageBuf[element] = new Image(); 
    imageBuf[element].onload = function(){count()}; 
    imageBuf[element].src = "thumbs/"+element; 
    }, imgList, 1, 250, function() { 
    alert("done loading"); 
    }); 
} 

Vous pouvez Vous souhaitez modifier le paramètre de taille de bloc ainsi que la durée du délai d'expiration pour qu'il se comporte exactement comme vous le souhaitez. Je ne suis pas sûr à 100% que cela fonctionnera pour vous, mais ça vaut le coup d'essayer ...