How to hide broken images in IE using jQuery?

Question

I have tried this code copied from jQuery site, but it fails in IE7/IE8, but works in other browsers. What is wrong with this code, it's from jQuery site(http://api.jquery.com/error/). I'm using jQuery version 1.4.4.

$(document).ready(function(){ 
  $("img").error(function(){
    $(this).hide();     
  });    
});

Answer 1

The problem is that by the time $(document.ready) is executed, the image has already finished loading so the load/error events won't be triggered anymore.

The only way I can think of to bypass this is to reload the image, thus "force" the event to be triggered:

$(document).ready(function(){ 
    $("img").each(function(index) {
        $(this).error(function() {
            $(this).hide();     
        });
        $(this).attr("src", $(this).attr("src"));
  });    
});

It shouldn't be too bad on performance as the images will be taken most probably from the cache, not really reloaded from the server.

Live test case (with cool cats ;)) is available here: http://jsfiddle.net/yahavbr/QvnBC/1/