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.

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.

• javascript
• jquery
• image

• Have you tried loading the img src on jQuery(Document).ready() and checking if it finds it there? Just an idea – Barlow Tucker Commented Nov 30, 2010 at 19:11

7 Answers 7

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/7cnQN/

Tested in FF, IE, Chrome, Safari, Opera.

$('img').each(function() {
    var img = this;
    if (img.plete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else if (img.readyState == 'uninitialized') {
        console.log('load failed - IE');
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});

On both jQuery(document).ready() and jQuery(window).onload() the img will have already had the error, so you are binding to error too late. Try using:

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

before jQuery(document).ready();

I haven't tried this code yet (and wouldn't have time too for a while) Let me know if it works.

I personally have issues with JQuery, as it seems to stop people looking into JavaScript's native capabilities. I would personally use the onerror event, e.g.:

myimage.onerror = function() { this.style.visibility = 'hidden'; }

(not tested)

The example on the .error() docs show this:

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

... which is essentially the same as what you're doing. Can you verify that jQuery is loaded and available on the page? Also, if you're using FireFox, Chrome or Safari, try checking your javascript console for errors.

EDIT: Note this also, from the docs:

This event may not be correctly fired when the page is served locally. Since error relies on normal HTTP status codes, it will generally not be triggered if the URL uses the file: protocol.

Are you testing this locally?

You might want to try a different tactic and instead show the images when they load:

jQuery('img').each(function(i,img){
    jQuery('img').bind('load',function(){ this.show(); });
    if (img.plete)
        jQuery(img).show();
});

First bind to the event, then check to see if the image has already loaded (.plete) and show it. This will require you to hide all of the images before-hand with a script or within the inline style of the individual images. Using a known container as a scope...

jQuery('#container img')

...you can limit this behavior to a subset of the images.

You dealing with a race condition. jQuery may or may not have been loaded when the image is loaded. The following code handles both cases.

$('img').each(function() {
    var img = this;
    if (img.plete) {
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            console.log(img, 'load failed');
        } else {
            console.log(img, 'load ok');
        }
    } else {
        $(img).error(function() { console.log(img, 'load failed - error()'); });
        $(img).ready(function() { console.log(img, 'load ok - onload()'); });
    }
});