Question

I’m trying to detect broken images in jQuery, in which case I want to remove them and replace by it’s alt text.
I’m using following code I found here on SO;

$(document).ready(function(){
    $('img.logoimg').error(function() {
        $(this).unbind("error");
        $(this).parent().prepend("<strong>"+$(this).attr("alt")+"</strong>");
        $(this).remove();
    });
    //...
}

This works fine in FF.

In Chrome however, the browser still shows a square indicating a broken image.
It seems as if the error event fires too late to detect the broken image.

Can I have it fire sooner? Is there something else wrong with the code?

[Edit] Added a solution below. Anyone able to explain this earns solution to this question.

Answer 1

I have identified the problem by elimination. It’s not where you would think.
Under my script tags, I had a Google Ads code:

<script type="text/javascript" src="my_javascript.js"></script>
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>GS_googleAddAdSenseService("ca-pub-XXXXXXXXXXXXXX");GS_googleEnableAllServices();</script>
<script type="text/javascript">
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_1");
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_2");
    GA_googleAddSlot("ca-pub-XXXXXXXXXXXXXX","banner_3");

    GA_googleFetchAds();
</script>

It’s the last call : GA_googleFetchAds() that kills it. Removing that call seems to solve my issue. Strangely.

I’ve now solved it like so:

$(document).ready(function(){
    GA_googleFetchAds();
});

Anyone with a reasonable explanation earns my eternal respect and gratitude.