2

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

加载的[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()另外-在前一个面板完成检查后，如何修改我的循环以检查每个面板？

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

4

1 回答 1

4

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

$(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回调，而不是：src

// 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 浏览器不是. 它可以很容易地检查它的缓存并查看它是否有图像并运行它的代码来触发行设置和行设置load之间的处理程序。它将排队处理程序以在下次 JavaScript 引擎可用时运行，但如果您的处理程序不在那里排队，它将不会排队，并且您永远不会收到事件回调。srconloadload

于 2013-03-04T16:12:24.120 回答