jquery - 预加载图像 & [object HTMLImageElement]

Question

我正在尝试创建预加载器，但是当我运行它时，控制台显示以下内容:

Loaded [object HTMLImageElement] of 5

从这行代码

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

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

"Loaded 1 of 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。

您需要进行的另一项更改是在设置 src 之前设置 onload 回调，而不是:

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

这样做:

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

Web 浏览器上的 JavaScript 是单线程的(禁止使用 Web Worker)，但Web 浏览器不是。它可以轻松检查其缓存并查看其是否具有图像并运行其代码以触发行设置 src 和行设置 onload< 之间的 load 处理程序。它将对处理程序进行排队，以便在下次 JavaScript 引擎可用时运行，但如果您的处理程序不在那里排队，它就不会排队，并且您永远不会获得加载事件回调。