Question

I use the error function below to hide external images which do not seem to load.
However images are hidden very easily and I think it is because the function executes to fast. Is there a way in Jquery to delay the function two seconds?

$(".display li img").error(function () {
    $(this).parent().parent().hide("fast");
    pos3 = $(this).attr("id"); 
    reportrefcam();
});

Answer 1

I probably would do it from the other side. Waiting for the pages load event and then check all images. Checking means, look if the image has a width and height, if not its most likely broken.

$( window ).on('load', function() {
    $( '.display li img' ).each(function() {
        if( (!this.width || !this.height) ) {
            pos3 = $( this ).attr( 'id' ); 
            reportrefcam();

            $( this ).hide( 'fast' );
        }
    });
});

---

demo: http://jsfiddle.net/vLC7U/

The window load event will eventually fire when all images + iframes on your entire side were loaded. So it’s a save bet to say, if an image does not have a dimension at this point, its broken.