How to detect whether all element's content has been loaded?

Question

I'm wondering how can I detect whether all content inside dynamically appended HTML element is loaded. The element's content might be both text and images, maybe videos. I need to detect it to get a correct element's height value. I believe that MutationObserver is not right solution for that as this only detects whether node has been changed or its attributes. I have to detect when element's content has been loaded. Delegating load events to parent doesn't change anything. Any suggestions?

I'm getting the content as a string from AJAX response. The string contains HTML tags, like `
`, ``, etc. I'm appending it on demand. — sunpietro, Aug 24 '15 at 09:27
So for text content, you can know when it finished loading (i.e. on success of ajax request). As for images, you need to listen to the "load" event of the img tags. For videos, it depends on what kind of video, are they youtube, flash, html5..? — Maroun Baydoun, Aug 24 '15 at 09:40
I tried to avoid adding event listeners to each image/video and use the event delegation on parent container instead. — sunpietro, Aug 24 '15 at 09:43

hellsgate · Answer 1 · 2015-08-24T09:57:54.440

1

You can do this by using a callback function on your AJAX call. Off the top of my head I can't remember how that works in vanilla javascript, but in jquery it would look like this:

$.ajax({
    url: 'my-url'
}).done(function(){
    // This only fires once the AJAX request / response has complete
    populateElement();
    fixElementHeight();
});

By doing it this way you ensure you have all the content before updating your element. Once the element has been updated, you are then able to measure its height. If part of the new content is an image, or some other content type which needs to be fetched, then I would do the fetching in the populateElement function:

var contentImage = new Image(imgWidth, imgHeight);
$(contentImage).click(function(event){
    ...
});
contentImage.src = 'source of image';

edited Aug 24 '15 at 09:57

answered Aug 24 '15 at 09:43

hellsgate

5,905
5
32
47

That's not the right solution. The issue is not in AJAX request it's in image load event. – sunpietro Aug 24 '15 at 09:44
You can add a load event to the image at this point as well, see the edit I've made. There's a bit more info at http://stackoverflow.com/questions/3511200/new-image-how-to-know-if-image-100-loaded-or-not – hellsgate Aug 24 '15 at 09:57

score 0 · Answer 2 · answered Aug 24 '15 at 09:35

You will most likely need a javascript that has a constant setTimeout checking for the length of an element. (an element that is not loaded usually has a length of 0 or is invalid)

This is something we encountered awhile back and probably applies to your situation as well. It's for a youtube thing for detecting when certain elements have finished loading, but seeing your question, the concept applies as well.

http://www.gambit.ph/how-to-use-the-javascript-youtube-api-across-multiple-plugins/

Looks a bit hacky to me. Using timeouts is not the nicest solution for that kind of detection. Because you will never know how long it would take to load all images in the element. — sunpietro, Aug 24 '15 at 09:38

score 0 · Answer 3 · answered Aug 24 '15 at 10:00

I decided to use Javascript promises to handle images load events. I'm creating a new promise for each image and updating my app after all images are loaded. So there's no other way round to make delegation on parent to detect whether all images were loaded.

How to detect whether all element's content has been loaded?

3 Answers3