预加载图像和 [object HTMLImageElement]

Question

我正在尝试创建预加载器，但是当我运行它时，控制台会显示：

已加载 [object HTMLImageElement]，共 5 个

从这行代码

console.log('Loaded ' + images[i] + ' of ' + images.length);

但理想情况下我希望它显示：

“已加载 1 个，共 5 个”

我该如何解决这个问题？我只想将其创建为回调，以便知道某个面板中的所有图像何时加载。

$(panel).each(function(){

    // Find Panel
        var panelId = $(this).attr('id');
        console.log('Loading ' + panelId);  

    // Find Images
        var images = $(this).find('img');
        var path = images.attr('src');
        console.log('Total of ' + images.length + ' Images');

    // Preload Images
        for( i= 0; i < images.length; i++ ) {

            images[i] = new Image();
            images[i].src = path;
            images[i].onload = function(){
                console.log('Loaded ' + images[i] + ' of ' + images.length);
            };

        }

    // End

});

另外 - 我如何修改我的 each() 循环，在前一个面板完成检查后检查每个面板？

任何帮助都会很棒。谢谢。

Answer 1

只需声明一个计数器并随时递增：

$(panel).each(function(){
        var loaded = 0; // <== The counter

    // Find Panel
        var panelId = $(this).attr('id');
        console.log('Loading ' + panelId);  

    // Find Images
        var images = $(this).find('img');
        var path = images.attr('src');
        console.log('Total of ' + images.length + ' Images');

    // Preload Images
        for( i= 0; i < images.length; i++ ) {

            images[i] = new Image();
            images[i].src = path;
            images[i].onload = function(){
                ++loaded;
                console.log('Loaded ' + loaded + ' of ' + images.length);
            };

        }

    // End

});

不要使用i，正如至少一位评论者所建议的那样（正如我在更仔细阅读您的代码之前所建议的那样）。在加载回调完成时，i 将始终为 images.length。

您需要进行的另一项更改是设置onload 回调before 设置src，因此：

// PROBLEM, sets up a race condition
images[i].src = path;
images[i].onload = function(){
    // ...
};

这样做：

images[i].onload = function(){
    // ...
};
images[i].src = path;

网络浏览器上的 JavaScript 是单线程的（除非使用网络工作者），但 网络浏览器不是。它可以轻松地检查其缓存并查看它是否具有图像并运行其代码以触发行设置src 和行设置onload 之间的load 处理程序。它将排队处理程序以便在下次 JavaScript 引擎可用时运行，但如果您的处理程序不在那里排队，它将不会排队，并且您永远不会收到 load 事件回调。