如何正確調用img onerror回調函數？

我試圖通過構建它的路徑和文件名來設置一個圖像src。如何正確調用img onerror回調函數？

這是我的代碼：

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;

好像只有最後一個擴展proccesed因爲我得到：

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

如果我做的：

img.onerror = testImages();

函數被調用遞歸無限次。

有人能告訴我y代碼有什麼問題嗎？

來源

2015-09-25 Boel

也許你的意思是這樣的 - 你需要設置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

來源

2015-09-25 13:54:54 mplungjan

我認爲OP的意思是相反的：嘗試另一個擴展如果加載失敗，而不是如果它已經正確加載。 – pawel

那麼OP的代碼有什麼問題呢？ –

＃1問題是他在設置src後在循環中分配錯誤處理程序 – mplungjan

我會推薦這種變化：

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

您的代碼書面正在更新的img.src擴展陣列已經被消耗後也。這引起了img.onerror事件再次觸發，由於設置在src爲「Wildschwein_Sus_scrofa.undefined」

來源

2015-09-25 13:59:37

謝謝你，但知道我得到： GET file：/// home/lucas/Desktop/Wildschwein_Sus_scrofa.jpg net :: ERR_FILE_NOT_FOUND和 GET文件：///home/lucas/Desktop/Wildschwein_Sus_scrofa.GIF net :: ERR_FILE_NOT_FOUND 因此，似乎只處理陣列的第一個和最後一個項目。 – Boel

您可能使用哪種瀏覽器？在我的控制檯中可以看到所有擴展中的[這個小提琴]（https://jsfiddle.net/e6Lz7m8t/）錯誤。 –

再次感謝，我沒有添加jsfiddle的問題，因爲代碼在jsfiddle中運行良好，並且數組中的所有項都被處理。我不知道它爲什麼在jsfiddle中起作用。我的瀏覽器是：Chrome版本41.0.2272.76 Ubuntu 14.04（64位） – Boel

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 = null; 
} 
img.onerror = testImages; 
testImages();

這對我的作品。

來源

2015-09-25 14:05:05

感謝男人，作爲其他答案，我得到：GET文件：///home/lucas/Desktop/Wildschwein_Sus_scrofa.jpg net :: ERR_FILE_NOT_FOUND和GET文件：///home/lucas/Desktop/Wildschwein_Sus_scrofa.GIF net :: ERR_FILE_NOT_FOUND所以似乎只處理數組的第一個和最後一個項目 – Boel

但我可以看到所有八個擴展的ERR_FILE_NOT_FOUND。你願意再次檢查嗎？清除緩存可能會有幫助。 –

我在Chrome和Chromium中再次檢查過，但是我只收到第一個和最後一個項目的錯誤。 – Boel

如何正確調用img onerror回調函數？

回答

相關問題