Question

Is there a way to tell, after the fact, whether an image (placed with the <img> tag, not via JS) has loaded correctly into a page? I have a gallery of head shots, and occasionally the third-party image server ends up serving up a 404. I can change the server-side code to use an onerror="showGenericHeadshot()", but I really want to avoid making changes to server-side code. Ultimately, I want to determine if an image is missing or broken and replace it with a generic “Image Not Found” graphic. Things I’ve tried:

1. Image.prototype.onerror = showGenericHeadshot — doesn’t work for <img> tags
2. $('img[src*=thirdpartyserver.com]).error(showGenericHeadshot) — doesn’t work in IE
3. $('img[src*=thirdpartyserver.com]).css('backgroundImage','url(replacementimage.gif)') — works, but still doesn’t get rid of the broken image icon in IE

Answer 1

Unfortunately, I’m not able to accept either @TJ Crowder’s nor @Praveen’s excellent answers, though both do perform the desired image-replacement. @Praveen’s answer would require a change to the HTML (in which case I should just hook into the <img> tag’s own error="" event attribute. And judging by network activity, it look like if you try to create a new image using the url of an image that just 404ed in the same page, the request actually does get sent a second time. Part of the reason the image server is failing is, at least partly, our traffic; so I really have to do everything I can to keep requests down or the problem will only get worse..

The SO question referred to in @danp’s comment to my question actually had the answer for me, though it was not the accepted answer there. I’m able to confirm that it works with IE 7 & 8, FF and webkit browsers. I’m doubtful it will work with older browsers, so I’ve got a try/catch in there to handle any exceptions. The worse case will be that no image-replacement happens, which is no different from what happens now without doing anything. The implementation I’m using is below:

$(function() {
    $('img[src*=images.3rdparty.com]').each(
        function() {
            try {
                if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) {
                    this.src = 'http://myserver.com/images/no_photo.gif';
                }
            } catch(e) {}
        }
    );
});