I need to load images in a webpage dynamically in Javascript, but need to catch if any image fails to load, how can I do this?
For instance:

try{
  var img = new Image();
  img.src = "404_not_found.png";
} catch( err ) {
  // tried this but didn't work
}

Yes, I know I'm not even waiting for the image to onload but when a 404 occurs, the onload method doesn't get called anyway.

I need to load images in a webpage dynamically in Javascript, but need to catch if any image fails to load, how can I do this?
For instance:

try{
  var img = new Image();
  img.src = "404_not_found.png";
} catch( err ) {
  // tried this but didn't work
}

Yes, I know I'm not even waiting for the image to onload but when a 404 occurs, the onload method doesn't get called anyway.

• javascript
• html
• image

Share Improve this question Follow asked Dec 8, 2011 at 5:00 PetruzaPetruza 12.3k2626 gold badges8888 silver badges144144 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

Before you assign the .src property, you need to set onload, onerror, and onabort handler functions. And, you may want to also set a timer so you can assume it isn't going to load if none of the handlers have been called when the timer fires.

Here's a working example: http://jsfiddle/jfriend00/48JmQ/

var img = new Image();
img.onerror = function() {alert("error")};
img.onabort = function() {alert("abort")};
img.onload = function() {alert("success")};
img.src = "404_not_found.png";