Jquery check if image is loaded

Question

Possible Duplicate:
jQuery callback on image load (even when the image is cached)

Is there a way to check if image is loaded by jquery? I have some images with external src and sometime src points to 404 page. Is there a way to check if that image is loaded? and then I can remove it from dom otherwise.

Thanks.

Scoobler · Accepted Answer · 2011-05-20T08:20:55.613

6

jQuery has a function to deal with this, take a look at .error()

So for example you could attach an .error() handler to all images and display something else if there is an error, like the source no longer exists:

$('img').error(function() {
    $(this).hide();
}).attr("src", "missing.jpg");

Here is a demo

edited May 20 '11 at 08:20

answered May 20 '11 at 08:12

Scoobler

9,538
4
34
51

Yeah, it works nicely. Thanks :) – user558134 May 20 '11 at 08:25
1

You've got it backwards - don't hide the image, and you should set the `src` in the callback. See my answer. – Matt Ball Jun 09 '11 at 15:37

score 6 · Answer 2 · edited May 23 '17 at 11:53

6

@Scoobler has the right idea, but the wrong implementation.

$(function ()
{
    $('img').error(function()
    {
        $(this).attr('src', 'http://i.stack.imgur.com/THJzu.gif');
    });
});

The .error() binding must take place on document ready - window load is too late.

Demo: http://jsfiddle.net/mattball/EebmC/

edited May 23 '17 at 11:53

Community

1
1

answered Jun 09 '11 at 15:39

Matt Ball

332,322
92
617
683

I thought the same, but strangely his demo link works, even in a huge DOM where I tried it. – needfulthing Jan 22 '15 at 14:56

score 0 · Answer 3 · answered May 20 '11 at 08:16

0

yes you can use error event like this....

$('#imageId')
  .error(function() {
    alert('Something bad happened.')
  })
  .attr("src", "image.gif");

answered May 20 '11 at 08:16

Vivek

10,426
14
44
65

1

@ Vivek.... ;) Instead of 'use' use ...'test'. Or we'll suppose you use *alerts* all around your web pages! ;) This looks like a modifyed copy-paste answer of the previous answer. – Roko C. Buljan May 20 '11 at 09:29

Jquery check if image is loaded

3 Answers3

Linked