Javascript 如何在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");
}

var cache=[]；
函数preload images（）{
var i；
$（“#加载”）.html（“加载…”）；
对于（i=0；i保留一个图像剩余计数器，并使用图像标签的加载事件来减少此计数器。当图像计数为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);
    }
}

var cache=[]；
函数preload images（）{
变量i，图像保留=180；
$（“#加载”）.html（“加载…”）；
对于（i=0；i
为什么这并不像人们所期望的那样有效

因为您的代码只是在循环中创建DOM元素，然后立即退出。因此，一旦创建
元素，您的“加载”消息就会被替换（这非常快）

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

我怎样才能使这项工作如期进行

您需要使用其他一些方法（如AJAX）来获取图像，以便能够控制图像并在接收到图像时收到通知，然后可以适当地更新进度消息

尝试：
添加解释，我会将-1切换为a+1。仅仅转储代码并不能帮助新用户学习。糟糕的是，我添加了解释。是的！它很有效！它允许我做我想做的事情。感谢您的解释，也感谢ZZBOV:）嗯，根据您添加的代码，我们正在添加一个事件处理程序，对吗？当事件引发时，处理程序会减少计数器“imagesRemaining”，循环中不会直接递减，对吗？是的，每次图像加载/中止或错误事件时，它都会递减。+1在第一个SO问题中陈述了两个清晰的问题！太棒了！感谢您的清晰解释，现在我明白了为什么在加载图像之前它会退出。