检测图像是否在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/

\n\n

img = new Image(); \n$(img).bind(\'error\', function () {\n      alert(\'error called\');                                                \n});\nimg.src = "invalid_img_name.png";\xe2\x80\x8b\n

\n