预加载图像和

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

加载[对象HTMLImageElement]为5

从这行代码

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

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

“已加载1”

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

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