javascript - 如何正确地递归调用 img onerror 回调函数？

Question

我正在尝试通过构建其路径和文件名来设置图像 src。

这是我的代码:

var extensions = ["jpg", "jpeg", "JPG","JPEG","png","PNG", "gif", "GIF"];
var i=0;
var img = document.querySelector("img");
var testImages= function() {
    img.src = "Wildschwein_Sus_scrofa."+extensions[i];
    i++;
    if (i<extensions.length)
        img.onerror = testImages;
}

testImages();

但我不知道发生了什么。如果我这样做:

img.onerror = testImages;

似乎只处理了最后一个扩展，因为我得到:

GET file:///home/beol/Desktop/Wildschwein_Sus_scrofa.GIF net::ERR_FILE_NOT_FOUND

如果我这样做:

img.onerror = testImages();

该函数被无限次递归调用。

有人能告诉我 y 代码有什么问题吗？

Answer 1

也许你是这个意思 - 你确实需要在设置 src 之前分配处理程序:

var extensions = ["jpg", "jpeg", "JPG","JPEG","png","PNG", "gif", "GIF"];
var i=1;
var img = document.querySelector("img");
img.onerror = function() {
    console.log("error:"+this.src);
    if (i<extensions.length) img.src="Wildschwein_Sus_scrofa."+extensions[i];
    i++;
}
img.onload=function() {
    console.log("success:"+this.src);
}
img.src="Wildschwein_Sus_scrofa."+extensions[0];

如果您有多个具有不同扩展名的图像，并且您想要测试负载和错误，它可能看起来像

FIDDLE

var extensions = ["jpg", "jpeg", "JPG","JPEG","png","PNG", "gif", "GIF"];
var i=0;
var img = document.querySelector("img");

function loadnext(img) {
  if (i<extensions.length) {
    img.src="Wildschwein_Sus_scrofa."+extensions[i];
    i++;
  }
}
img.onerror = function() {
    console.log("error:"+this.src);
    loadnext(this);
}
img.onload=function() {
    console.log("success:"+this.src);
    loadnext(this);
}
loadnext(img);

如果你不想专门处理错误或负载，你可以这样做

var extensions = ["jpg", "jpeg", "JPG","JPEG","png","PNG", "gif", "GIF"];
var i=0;
var img = document.querySelector("img");
function loadnext() {
  if (i<extensions.length) {
    this.src="Wildschwein_Sus_scrofa."+extensions[i];
    i++;
  }
}
img.onload=img.onerror=loadnext; // no ()
img.onload(); // start