圖像加載回調解僱即使圖像不存在

Question

我有下面的代碼被竊聽我：Fiddle

這些期望的行爲：

• 如果圖像不存在，我想加載另一個圖像，更改src屬性
• 如果該圖像加載失敗，則圖像應該隱藏。
• 如果圖像成功加載（存在），我希望它顯示

HTML

<div id="test"> 
    <img id="myimage" src="nonono.jpg" /> 
</div> 

JS

$("#test img").error(function() { 
    console.log("error loading img " + $(this).attr("src")); 
    $("#myimage").attr("src", "yuyuyu.jpg") 
}).load(function() { 
    console.log("success loading img " + $(this).attr("src")); 
}) 

//--- Simulate a new image load 
$("#myimage").attr("src", "yeyeye.jpg"); 

這是控制檯輸出loosk like：

GET http://fiddle.jshell.net/_display/yeyeye.jpg 404（未找到）

錯誤裝載IMG yeyeye.jpg（指數）：23次

成功加載IMG yuyuyu.jpg（指數）：26

GET http://fiddle.jshell.net/_display/yuyuyu.jpg 404（未找到）

是不是很奇怪？這兩個圖像都不存在，我期待兩次錯誤信息，但我得到了一個成功！

有什麼想法嗎？我錯過了什麼嗎？

謝謝

---

UPDATE

我試圖添加一個setTimeout到src屬性變化，以便更好地瞭解哪些圖像不火load事件..和..的加載事件不會被解僱！

看到小提琴這裏：Fiddle with timeout

JS

$("#test img").error(function(){ 
    console.log("error loading img " + $(this).attr("src")); 
    setTimeout(function(){ 
      $("#myimage").attr("src", "yuyuyu.jpg") 
    }, 1000) 
}).load(function(){ 
    console.log("success loading img " + $(this).attr("src")); 
}) 

爲什麼？

Answer 1

這並不奇怪，在功能上完全不成功所以甚至錯誤是一個完整的要求運行。見jQuery load documentation。

如果您像這樣加載圖像，則可以訪問請求的狀態。

$("#test img").load("yuyuyu.jpg", function(response, status, xhr) { 
    alert(status); 
}); 

你可以通過特定的錯誤代碼：xhr.status
您還可以通過得到錯誤的文本表示：xhr.statusText

見fiddle。另見example。