image.onError event never fires, but image isn't valid data - need a work around
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;}
Here is my solution. If I've 404 for my image - I try to insert one of my array that is 200 OK (Pure Javascript). Images must be in same path. Otherwise - my func will return 'no-image.png'.jQuery/JavaScript to replace broken images