Question

我正在使用此代码预加载我需要的所有图像

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

使用那个$（“＃loading”）。html的东西，我期待等到循环结束才能改变内容，但它不会发生。它几乎瞬间写入“加载完成”，而firebug告诉我图像仍在下载。

如何按预期工作？为什么这不像人们预期的那样有效？

感谢。

Answer 1

保留图像剩余计数器并使用图像标记的加载事件来减少此计数器。当图像计数为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);
    }
}

Answer 2

为什么这不像人们预期的那样有效？

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

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

如何按预期完成此工作？

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

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

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

2 个答案: