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不会运行。任何帮助将不胜感激，因为这让我头疼3天。

Answer 1

您必须在onload =

之前执行src =

这是因为图像可以从缓存中获取，因此可以立即加载。在下一行中定义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是你摆脱循环的唯一机会。

Answer 2

你的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;
}

我也改变了onload赋值的顺序，就像@Matmarbon建议的那样。

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

2 个答案: