want to hide image when image is not found at the src location?

Question

jQuery('img').bind('error',function(){
            alert('hi');
        jQuery(this).hide(); 
        });

I have written this code but non available images are not hiding and still showing cross sign. Can anybody point out what can be wrong. I am writing this under document.ready and i have tried it under window.onload as well.

Answer 1

The problem seems to be that by the time you bind your error event, the image's onerror has already fired. You can fire it again by resetting the img.src after binding the event. The following worked on IE8, FF, and Chrome.

$('img').error(function(){
    alert('hi');
    $(this).hide(); 
});

$('img').each(function() { this.src = this.src; });

jsFiddle is here: http://jsfiddle.net/7cnQN/