In the image.onload
event listener, check whether image.width
and image.height
are both zero (preferably image.naturalWidth
and image.naturalHeight
, when they are supported).
If the width and height are both zero, the image is considered invalid.
Demo: http://jsfiddle.net/RbNeG/
// Usage:
loadImage('notexist.png');
function loadImage(src) {
var image = new Image;
image.onload = function() {
if ('naturalHeight' in this) {
if (this.naturalHeight + this.naturalWidth === 0) {
this.onerror();
return;
}
} else if (this.width + this.height == 0) {
this.onerror();
return;
}
// At this point, there's no error.
document.body.appendChild(image);
};
image.onerror = function() {
//display error
document.body.appendChild(
document.createTextNode('\nError loading as image: ' + this.src)
);
};
image.src = src;
}