Как отобразить статус загрузки с помощью preloader и нескольких изображений?

Question

Я создаю слайд-шоу из нескольких сотен изображений и хотел бы создать красивую полосу загрузки, поэтому идея состояла в том, чтобы предварительно загрузить изображения с помощью JavaScript, а затем инициализировать оставшиеся послесловия пользовательского интерфейса.

Предварительная загрузка изображений не является проблемой, но заставляет браузер обновлять статус при загрузке. Я попробовал несколько вещей, но браузер перекрасит дисплей только после его завершения.

Я даже пробовал скрипт из этого вопроса , но я получаю те же результаты.

Вот что у меня есть (imgList - это массив имен файлов. Я использую 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

Попробуйте использовать функцию из мой ответ на этот вопрос :

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"); 
  });
}

Вы можете изменить параметр размера чанка, а также продолжительность тайм-аута, чтобы заставить его вести себя так, как вы этого хотите. Я не уверен на 100%, что это сработает для вас, но стоит попробовать ...