檢測圖像是否在Javascript中被破壞

Question

我正在使用Javascript將圖像添加到HTML5畫布：

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

然后loadCallBack繪制圖像。

問題是有時image_url指的是破損或不存在的圖像。 發生這種情況時，我在控制台中出現404錯誤，並且畫布上的圖像保持白色。 相反，我希望能夠將圖像的src屬性替換為另一個image_url 。

我嘗試了以下內容，但沒有奏效：

img.addEventListener("error", function(){console.log("404");});

如何檢測圖像的404？

注意：我仍在尋找解決方案，因為迄今為止發布的兩個都沒有奏效。

Answer 1

與Kostia的答案相同的代碼：只是為了比較jQuery的丑陋和vanilla javascript之美：

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

Answer 2

在我的jQuery工作... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";​