Comments on: Did you know about the onerror attribute of the img tag?

By: Wayne

Wayne — Tue, 15 Jan 2013 21:56:28 +0000

Just read: http://jquery-howto.blogspot.de/2013/01/8-methods-that-will-not-work-in-jquery.html

.error() added in v1.0, deprecated in v1.8. Not to be confused with $.error() method, that throws new Error(msg);

By: Dominic Watson

Dominic Watson — Tue, 08 Jan 2013 19:53:56 +0000

Awesome, I had no idea, thanks for the tip. The jquery example here suggests that the src attribute of the image would need / want to be dynamically attached to the image element after attaching your error handler (so that the handler will always fire) if using .error():

http://api.jquery.com/error/

I couldn’t get $(‘img’).on( ‘error’, function(){…}) to fire because it was too late. jQuery suggest:

$(‘#myimage’).error( handler ).attr( ‘src’, ‘/path/to/the/image.jpg’ );

Which is a shame.

By: Ryan

Ryan — Tue, 08 Jan 2013 16:34:00 +0000

Nathan that’s neat, I’ve read that you can do it that way. But I’m still surprised it works. I would think that sometimes the error event would fire before jQuery had added the handler to those elements? But I may not be completely understanding the order of execution.

By: Nathan Strutz

Nathan Strutz — Tue, 08 Jan 2013 16:30:37 +0000

That’s awesome. Why have I never seen that before? Thanks! I just experimented a bit with it, and it looks like you can do this more automatically with some jQuery. I don’t know how well this will print out on your blog comments, but…

$(“img”).on(“error”, function(e){
this.src=”imageDoesNotExist.png”;
});

That lets you leave off the onerror= event from your HTML elements. Thanks again, Ryan!

By: Chris Tierney

Chris Tierney — Tue, 08 Jan 2013 16:17:28 +0000

Excellent tip. Thanks Ryan!