Attach load and error events to dynamic images

Question

I am trying to attach load and error event to some images which are loaded dynamically. Here is the code:

$(document).on('load', '.no-image-aware', function(){
    $(this).on('error', function(){
        $(this).attr('src','../resources/images/no-image.jpg');
    });
});

This is not working. Even:

$(document).on('load', '.no-image-aware', function(){
    console.log($(this));
});

is not printing anything in console.

But if I do this:

$('.no-image-aware').load(function(){}).error(function(){
    $(this).attr('src','../resources/images/no-image.jpg');
});

It works. But it works only when the images with style class no-image-aware are present at the time of the component creation.

I am using ADF Faces. In ADF Faces some component loads their children later. So I need to attach the event handler to these images as descendants of the parent component. But this is not likely ADF Faces issue. What I want is to add load event for future images.

Isn't it possible to attach load event to the images? For click or mouseover it works. So why not for load?

I am using jQuery 1.10.0. Any pointer would be very helpful to me.

Here is JSFiddle which emulates the stuff what actually I want to achieve.

did you find a solution for this? i'm gavinf the exactly same problem — Rommel Castro, Jan 10 '14 at 18:16
@RommelCastro no I haven't found any solution for this problem. — Tapas Bose, Jan 11 '14 at 14:42

score 1 · Answer 1 · edited May 23 '17 at 11:49

While this may not be the solution that you are looking for (and could very well be bad form), I believe it is successful at recognizing the error() and load() events.

What you can do is add new event listeners every time a new image has been requested.

I believe the problem is that the load() event can't be attached to any parent elements that are static (non-dynamic) because they aren't the items being load()ed.

As a few other questions have intoned, the load() event doesn't "bubble up". I agree with the answer posted here. The wikipedia entry also explains which events bubble up. Since mousever and click do, then clicking anywhere in the parent element will get "caught" and only subsequently fire if your selector matches for what was clicked.

A similar (yet one-time) dynamic element creation load event capture was experienced in this question by accidentally chaining the load event to the body element.

I have modified your JSFiddle to reflect the approach I think can accomplish what you are seeking.

In essence:

var image = $('<img src="..." class="images"/>');
$(".imageContainer").append(image);
// Once they are added to the document, you may begin 
// listening for the load event
$(".images").on("load", function() {...});

If you have a very large number of images being added I don't know how this would impact performance but I think it may be the only way to listen at this time.

Another option may be to add function names or inline coding to the onerror attribute of your <img> tag (and possibly onload). If the behaviors are simple enough you may not need to add listeners at all and instead have the inline javascript arrive already attached to each new image. I was able to successfully hide images that failed to load properly using this:

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

Courtesy this answer (or this one).

Attach load and error events to dynamic images

1 Answers1