0

I'm trying to load images dynamically after an Ajax call. Then I want to detect once those images have finished loading and call a handler. I need this to be pure javascript and I need to not bind a listener directly to the image, I want to bind to the window/dom and delegate events.

I've tried a bunch of different examples online and none seem to work with the load event.

window.addEventListener("load", function(e) {
    console.log("in");
    var target=e.target;
    if (target.classList && target.classList.contains('target-class')) {
        handler.call(target, e);            
    }
});

This is what I have now and it simply doesn't work. It doesn't even fire the console log when the images are appended and loaded.

DasBeasto
  • 2,082
  • 5
  • 25
  • 65
  • 2
    [`load`](https://developer.mozilla.org/en-US/docs/Web/Events/load) doesn't bubble, you've to attach the load events to the image elements. – Teemu Mar 23 '18 at 17:33
  • The load event is fired when a resource and its dependent resources have finished loading. So the window load event won't achieve this result. Please see the current mozilla docs. https://developer.mozilla.org/en-US/docs/Web/Events/load – Jay Jordan Mar 23 '18 at 17:37
  • 1
    It's really awkward. You have to find all the images you added, add `load` and `error` handlers for all of them, then use a function to check their `complete` and `error` flags and remove the handler for ones that are complete. The linked question's answers (and the various ones they link to) should get you there. – T.J. Crowder Mar 23 '18 at 17:37
  • @JayJordan: Yes, but again, it doesn't bubble (natively; jQuery makes it bubble, but the OP doesn't appear to be using jQuery). So hooking `load` on `window` will not give you notification when images added after the page has loaded are loaded. – T.J. Crowder Mar 23 '18 at 17:38
  • @T.J.Crowder, I agree. My answer was in support of other answers, not in opposition to them. I see it needs more context. – Jay Jordan Mar 23 '18 at 17:39
  • @T.J.Crowder The linked answer is very helpful but I don't think it helps with the part that I was hoping to accomplish by binding to the window. This code is going to be a part of a plugin meant for "non-coder" users, so I wouldn't want to add extra setup by making the user setup calls to my "waitForImages" function every time they load more images. If it was bound to the window it would be detected automatically. Is that just not possible? – DasBeasto Mar 23 '18 at 17:47
  • 1
    Since you mentioned the reason is IE doesn't bubble load I was able to find an answer here: https://stackoverflow.com/questions/14983988/is-bubbling-available-for-image-load-events The answer by @myf worked for my issue. – DasBeasto Mar 23 '18 at 17:54
  • 1
    @DasBeasto: It's not just IE, `load` doesn't bubble on any browser. I'm very surprised that answer works, but hey, if it does. :-) The other way of addressing it would have been a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) (to watch for `img` elements being added). – T.J. Crowder Mar 23 '18 at 17:56

0 Answers0