Jquery img.onload 不会在 for 循环中运行

Question

我正在尝试创建一个动态图像库，其中所有被命名为索引的图像（例如"150.jpg"）当它们被索引时，图像的顺序看起来像这样：1.jpg、50.jpg、200.jpg等。。。在这里，我创建了一个for循环，它将检查具有给定名称的图像是否存在，如果存在，则停止循环。这是我的代码：

var x = 1;
for (w=0;w==0;x++){ 
var newurl = imgfolder + x + ".jpg";
var img = new Image();
img.src = newurl;
img.onload = function() {alert("Yeah:Image exists"); w=1;} ;
}

问题是，如果没有for循环，它可以正常工作，但当它在循环中时，img.onload就不会运行。任何帮助都将不胜感激，因为这让我头疼了三天。

Answer 1

for循环条件阻止它迭代。看见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

for (x=0; x<10; x++){ 
    var newurl = imgfolder + x + ".jpg";
    var img = new Image();
    img.onload = function() {alert("Yeah:Image exists"); w=1;} ;
    img.src = newurl;
}

我还按照@Matmarbon的建议更改了加载任务的顺序。

Answer 2

必须在src = 之前执行onload =

这是因为图像可以从缓存中获取，因此可以立即加载。当您在下一行中定义onload =时，可能已经太迟了。

[编辑：]

除此之外还有另一个问题：

想象一下流程：

• for (w=0;w==0;x++){
  • w=0
  • w==0是真的，所以继续
• var newurl = imgfolder + x + ".jpg";
• var img = new Image();
• img.src = newurl;
• img.onload = function() {alert("Yeah:Image exists"); w=1;} ;
• for (w=0;w==0;x++){
  • w==0仍然是真的，所以继续
• var newurl = imgfolder + x + ".jpg";

有一个问题：JavaScript是单线程的！这意味着没有什么可以异步运行。因为您的代码永远不会停止，所以alert("Yeah:Image exists"); w=1;就没有机会执行。但执行w=1是您摆脱循环的唯一机会。