CODEWITHSUNDEEP
javascriptjquerydom
iPherian
iPherian

Reputation: 958

JQuery: Detect when element and all children are loaded

I'd like to have code executed when a particular element and all of it's children are in the DOM. I know how to poll for the desired element's existence, or even better, to use a MutationObserver, but the desired element is itself rather large and I can't be sure that all of it's children are fully loaded simply based on it existing.

I could wait for ready which is called when all the DOM is loaded, but the page usually takes a rather long time to load. In the interests of speed i'd like to know without necessarily waiting for $(document).ready().

I did find the on function, I love the fact that it will be called for elements which don't even exist yet:

$(document).on('SomeEvent', '#desiredElem', handler);

...however I don't know of an event which is fired for an html element being fully in the DOM.

My script is being injected into the browser, and I know from logging that it's running a long time before $(document).ready() or DOMContentLoaded. Basically i'd like to take advantage of that. I can't add <script> tags to the HTML, unfortunately.

On a side note, an event for an object existing would be interesting. It would save me from having to use MutationObserver.

Upvotes: 1

Views: 5185

Answers (2)

jfriend00
jfriend00

Reputation: 708056

Since you've said that what you're trying to discern is when an element and all of its children that are present in the source HTML of the page are loaded, there are a couple things you can do:

  1. You can test for the presence of any known element after the last child. Since HTML elements are loaded serially in order, if the element after the last child is present, then everything before it must already be in the DOM because page HTML is inserted only in the order it appears in the page HTML source.

  2. If you put a <script> tag after the relevant HTML in the page, then all HTML before that <script> tag will already be in the DOM when that script tag runs.

  3. You can either poll or use a mutation observer, but chances are this won't really help you because no scripts run while the DOM parser is in the middle of inserting a bunch of HTML into the page. So, your scripts or mutation events would only run after the whole page DOM was inserted anyway or when the page pauses in order to load some other inline resource such as a <script> tag.

  4. You can fallback to the DOMContentLoaded event which will tell you when the whole DOM is loaded.

For more concrete help, we need to understand much more about your specific situation including an example of the HTML you're trying to watch for and a full understanding of exactly what constraints you have (what you can modify in the page source and where in the page you can insert or run scripts).

Upvotes: 2

gurvinder372
gurvinder372

Reputation: 68443

You need to setup a timer and keep observing the DOM checking if the element exists or not

function checkIfLoaded( callBack, elementSelector )
   setTimeout( function(){

     $( elementSelector ).size() == 0 )
     {
        //continue checking
       checkIfLoaded( callBack, elementSelector )
     }
     else
     {
        callBack();
     }
   }, 1000 );
)

checkIfLoaded( function(){ alert( "div loaded now" ) }, "#divId" );

Upvotes: 0

Related Questions