Why isn't jQuery error detecting the missing images in this page?

Question

Code:

<img src="//www.gravatar.com/avatar/881575a2c5c2c37d6de9166e384ad596?d=gravatar_default&amp;s=50&amp;r=G" class="avatar user-40-avatar avatar-50 photo" width="50" height="50" alt="Profile picture of eagink@gmail.com">

$('.avatar-50').error(function() {
  $(this).hide()
})

(No image is being hidden).

As you can see some of the images are not loading:

Why is this? And how to detect those unloaded pictures?

Live site: http://www.chineselearnonline.com/members/

You need to assign the error handler outside the onload event since that is AFTER all images have loaded — mplungjan, Aug 26 '15 at 08:29

score 2 · Accepted Answer · edited May 23 '17 at 12:29

You need to assign the error handler outside the onload event, BEFORE the image tags since now you assign the error handler AFTER all images have loaded

Alternative

<img onerror="this.style.display='none'" ...>

or

<img onerror="this.src='blank.gif'" ...>

or after the fact (taken from here):

$(function() {
  $(".avatar-50").each(function() {
    if (!this.complete || (typeof this.naturalWidth !== "undefined" && this.naturalWidth === 0)) {
      $(this).hide();
   }
  });
});

score -1 · Answer 2 · answered Aug 26 '15 at 08:35

-1

You should place the script inside document.ready:

    $(document).ready(function(){
       $('.avatar-50').error(function() {
          $(this).hide()
       })
    });

answered Aug 26 '15 at 08:35

lvil

4,326
9
48
76

1

It is and that is the problem. Read my comments and answer – mplungjan Aug 26 '15 at 08:35
1

No, that is his problem – mplungjan Aug 26 '15 at 08:36

Why isn't jQuery error detecting the missing images in this page?

2 Answers2