预载图像& [对象HTMLImageElement] [英] Preloading Images & [object HTMLImageElement]

问题描述

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

I'm trying to create preloader, but when I run this, console displays this:

已加载 [对象HTMLImageElement ] 5

来自此行代码

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

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

But Ideally I want it to display:

已加载1的5

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

How can I fix this? I just want to create this as a callback so I know when all images in a certain panel has loaded.

$(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（）循环，在上一个面板完成检查后检查每个面板？

Also - How could I modify my each() loop, to check each a panel, after the previous panel has finished checking?

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

Any help would be great. Thanks.

推荐答案

只需申报一个计数器并随时增加：

Just declare a counter and increment it as you go:

$(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 在加载回调完成时始终为 images.length 。

Don't use i, as at least one commenter suggested (and as I suggested before reading your code more carefully). i will always be images.length by the time the load callback is done.

您需要做的另一项更改是在设置 src之前设置 onload 回调 ，所以代替：

Another change you need to make is to set the onload callback before setting src, so instead of:

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

这样做：

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

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

JavaScript on web browsers is single-threaded (barring the use of web workers), but the web browser is not. It can easily check its cache and see that it has the image and run its code to trigger the load handlers between the line setting src and the line setting onload. It will queue up the handlers to be run the next time the JavaScript engine is available, but if your handler isn't there to get queued, it won't get queued, and you never get the load event callback.

这篇关于预载图像& [对象HTMLImageElement]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！