如何在for循环中预加载图像时显示加载消息？

我使用此代码预装我需要如何在for循环中预加载图像时显示加载消息？

var cache = []; 
function preloadImages() { 
    var i; 

    $("#loading").html("loading..."); 
    for (i = 0; i <= 180; i++) { 
     var src = source.replace("###", i); 

     var cacheImage = document.createElement("img"); 
     cacheImage.src = src; 

     cache.push(cacheImage); 
    } 
    $("#loading").html("loading completed"); 
}

有了这样的$（“＃加载”）。HTML的东西，我期待等待，直到循环结束更改内容的所有图像，但它不会发生。它几乎是瞬间写入“加载完成”，而萤火虫告诉我，图像仍在下载。

我该如何使这项工作按预期进行？为什么这不像预期的那样工作？

谢谢。

来源

2011-08-08 Ale A

+1在你的第一个SO问题中陈述2个明确的问题！好样的！ – xan

非常感谢:) –

保留图像剩余计数器并使用图像标签的加载事件来减少此计数器。当图像计数为0时，表示所有图像均已下载，则可以显示加载完成信息。

var cache = []; 
function preloadImages() { 
    var i, imagesRemaining = 180; 

    $("#loading").html("loading..."); 
    for (i = 0; i <= 180; i++) { 
     var src = source.replace("###", i); 

     var cacheImage = document.createElement("img"); 
     $(cacheImage).bind('load abort error', function(){ 

      if(imagesRemaining-- == 0){ 
       $("#loading").html("loading completed"); 
      } 

     }); 
     cacheImage.src = src; 

     cache.push(cacheImage); 
    } 
}

来源

2011-08-08 14:37:26 ShankarSangoli

添加一个解释，我将-1切换为+1。只是倾销代码并不能帮助新用户学习。 – zzzzBov

你能解释投票的原因吗？ – ShankarSangoli

我不好，我加了解释。 – ShankarSangoli

这是为什么不工作作为一个可以期待？

因为您的代码只是简单地在循环内创建DOM元素，然后立即退出。因此，只要<img>元素被创建（这非常快），您的“加载”消息将被替换。

与此同时浏览器将异步获取指定的图像（慢得多），但您的代码已经完成。

我该如何按预期做到这一点？

您将需要使用一些其他手段，如AJAX，得到的图像，让您可以有控制，他们已经收到时得到通知，则可以适当地更新你的进度消息。

尝试：Most efficient way to GET images using jQuery AJAX

来源

2011-08-08 14:42:16 xan

谢谢你的明确解释，现在我明白了为什么它会在加载图像之前退出。 –

如何在for循环中预加载图像时显示加载消息？

回答

相关问题