CODEWITHSUNDEEP
javascriptajax
Zippy1970
Zippy1970

Reputation: 681

Find out content has fully loaded after adding said content through Javascript

I'm implementing (through pure JavaScript) something like facebook's message loading. Meaning that if you scroll to the end of the page, new (HTML) content is loaded and added to the end of the page. I get this extra content through Ajax. But when I add this (HTML) to the page, it could mean the page has to load extra images. Is there a way I can figure out when the page has finished loading everything, so including all the new images?

Upvotes: 1

Views: 71

Answers (1)

Schahriar SaffarShargh
Schahriar SaffarShargh

Reputation: 1971

You can add the load event (https://developer.mozilla.org/en-US/docs/Web/Events/load) to the appended elements:

function LOADER_FUNCTION(e) {
   console.log("LOADED", e.target);
}

var element = document.querySelector('#parent');
for(i=0; i<element.childNodes.length; i++) {
   element.childNodes[i].addEventListener('load', LOADER_FUNCTION);
}

This will call the LOADER_FUNCTION function when the content within that element is ready. Oddly this doesn't seem to work when attached to the parent.

Edit:

Here is a working example. Although this example is not using Ajax (mainly due to CORS issues) it should work under the same conditions. I've used innerHTML to set my DOM in order to demonstrate that this event is not limited to createElement -> appendChild:

(function(){
  // This Code Runs after DOMContentLoaded
  var element = document.getElementById('parent');

  function LOADER_FUNCTION(e) {
     document.querySelector('.status').innerText = ("LOADED " + e.target.tagName);
     console.log("LOADED", e.target);
  }
  
  element.innerHTML = "<img src='http://i.imgur.com/OfSN9oH.jpg'>";

  for(i=0; i<element.childNodes.length; i++){
    // Attach new event handler
    element.childNodes[i].addEventListener('load', LOADER_FUNCTION);
  }
})()
<div class='status'></div>
<div id="parent"></div>

Edit 2:

For nested children in append/innerHTML use element.querySelectorAll('*');

https://jsfiddle.net/bckpL9k6/1/

Upvotes: 1

Related Questions