Question

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

已加载 [对象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之前设置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工作者），但 Web浏览器不是。它可以轻松检查其缓存并查看其是否有图像并运行其代码以触发行设置load和行设置src之间的onload处理程序。它会将处理程序排队，以便在下次JavaScript引擎可用时运行，但如果您的处理程序不在那里排队，它将不会排队，并且您永远不会得到load事件回调。

预载图像＆amp; [对象HTMLImageElement]

1 个答案: