Detect whether Image is broken in Javascript

Question

I'm adding images to an HTML5 canvas using Javascript:

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

And then loadCallBack draws the image.

The problem is that sometimes the image_url refers to a broken or nonexistent image. When this happens, I get a 404 error in the console and the image on the canvas stays white. Instead, I'd like to be able to replace the image's src attribute with another image_url .

I tried the following and it did not work:

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

How can I detect the 404s of the images?

Note: I'm still looking for a solution, as neither of the two posted so far has worked.

Answer 1

The same code as the Kostia's answer: just to compare the ugliness of jQuery and the beauty of vanilla javascript:

function brokenImage() { ... }

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

Answer 2

Works in jQuery for me... http://jsfiddle.net/5v2qG/

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