You probably want to clear out onerror before setting src. Otherwise if noimage.gif is also missing you might end up with a "stack overflow".
–
pcorcoranSep 18 '08 at 17:14

33

I thought & hoped we were moving away from inline attributes for javascript events...
–
redsquareSep 2 '09 at 6:04

12

redsquare... they are perfectly understandable when you are judicious about keeping them under control and can even be useful when you want your markup to reflect what is actually going to happen.
–
NickCFeb 18 '10 at 21:41

2

Good point NickC, about the markup showing what's happening, I just cringe when I look at it :P
–
SSH ThisMar 27 '12 at 21:11

17

@redsquare, I completely agree, but this is a unique case. Inline is the only place where you can attach the listener with absolute certainty that the event will not trigger before your listener is attached. If you do it at the end of the document or wait for DOM loaded you may miss the error event on some images. It does you no good to attach an error handler after the event has fired.
–
PrestaulSep 5 '12 at 0:40

If you use this technique you can use the "one" method to avoid needing to unbind the event: $('img').one('error', function() { this.src = 'broken.gif'; });
–
PrestaulApr 1 '11 at 16:18

3

+1 But do you have to unbind it? It works beautifully on dynamic images (eg. ones that can change on hover) if you don't unbind it.
–
aximiliApr 5 '11 at 5:27

9

I think that if you don't unbind it, and the broken.gif src reference ever fails to load for any reason, then bad things could happen in the browser.
–
travisApr 5 '11 at 15:49

3

@travis, at what point would you make this call? Is there any way to use this method and be certain that your handler is getting attached BEFORE the error event fires?
–
PrestaulSep 5 '12 at 0:43

3

Here is an example of a case where the error fires before the event handler is attached: jsfiddle.net/zmpGz/1 I'm genuinely curious if there is a fail-safe way to attach this handler...
–
PrestaulSep 5 '12 at 1:03

Just for information in case someone like me try to attach the error event on a dynamic HTML img tags well there is catch because apparently img error event don't bubble in most browsers at the opposite of what the standard say:

So something like this will not work:

$(document).on('error', 'img', function () { ... })

Hope this will be helpful to someone else, i wish i had seen this here in this thread but i didn't so i am adding it :)

jQuery.Preload is a plugin which is required to use the example code.
–
Dan LordSep 18 '08 at 15:35

15

Yes...this is linked in the answer on the first line.
–
Nick Craver♦Sep 18 '08 at 16:03

Thank you Nick, this appears to be a good solution for the 8+ year old problem of Firefox not showing an image replacement for broken images. Plus you can brand the little thing...thanks again.
–
blackhawkAug 8 '14 at 12:24

couldn't find a script to suit my needs so I made a recursive function to check for broken images and attempt to reload them every 4 sec until they are fixed. I limited it to 10 attempt as if it's not loaded by then the image might not be present on server and the function would enter an infinite loop. Still testing though. Feel free to tweak it :)

Nice idea with trying to reload images. This is useful for images that are uploaded/autogenerated and the server might not have gotten/completed as the page is loaded. That's some original formatting. A bit too inconsistent and not in my taste however...
–
JoakimNov 10 '14 at 13:04

I don't know jQuery yet, so my answer will be generic (and the result of a quick search...).
I found the page Detecting broken images with JavaScript (via a DZone Snippet, but I better give the original source!) which gives a simple and apparently relatively cross-browser (to test on Opera/Safari) method.

Of course, it would be better to serve a non-broken page, no? Although to be honest it can be a connection issue to.

Not sure if there is a better way, but I can think of a hack to get it - you could ajax post to the img url, and parse the response to see if the image actually came back. If it came back as a 404 or something, then swap out the img. Though i expect this to be quite slow.

Just because there's not enough answers here, here's my coffeescript variant. I made it to fix an issue with Turbolinks that causes the .error() method to get raised in firefox sometimes even though the image is really there.

This has been frustrating me for years. My CSS fix sets a background image on the img. When a dynamic image src doesn't load to the foreground, a placeholder is visible on the img's bg. This works if your images have a default size (e.g. height, min-height, width and/or min-width).

You'll see the broken image icon but it's an improvement. Tested down to IE9 successfully. iOS Safari and Chrome don't even show a broken icon.

I use the code below which first tries to find the current user's avatar based on their userid which in this case is "123", and if it doesn't find an avatar image the onerror code changes the img src to a placeholder image.