Javascript 如何使用预加载程序和多个图像显示加载状态？

我正在构建一个包含数百个图像的幻灯片，并希望构建一个漂亮的加载条，所以我的想法是使用JavaScript预加载图像，然后初始化UI的其余部分

预加载图像不是问题，但是让浏览器在加载时更新状态。我尝试了一些方法，但浏览器只会在完成后重新绘制显示

我甚至尝试了来自的脚本，但我得到了相同的结果

以下是我到目前为止得到的（imgList是一个文件名数组，我正在使用。）

---

尝试从以下位置使用该函数：

function incrementallyProcess（workerCallback、数据、chunkSize、超时、completionCallback）{
var itemIndex=0；
（功能（）{
var remainingDataLength=（data.length-itemIndex）；
var currentChunkSize=（remainingDataLength>=chunkSize）？chunkSize:remainingDataLength；
if（itemIndex

---

您可能需要修改chunk size参数以及超时的长度，以使其按照您希望的方式运行。我不是100%确定这对你有用，但值得一试…

这很巧妙，杰森。干得好。你很可能会得到这个问题的答案，但我会把这个问题留到明天。如果它有效，那就太好了。在我自己的项目中，我们正在加载大量数据，这让用户感觉正在发生的事情，即使是递增的，也比应用程序暂停并立即将所有内容转储到UI中要好。是的，效果很好，谢谢。现在我有了一个进度条，所有的缩略图都被缓存了。

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()  

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