CODEWITHSUNDEEP
javascriptjqueryhtml
Adjit
Adjit

Reputation: 10305

Check if an element and its children have been loaded

I know the .load() function in jQuery, and how to use the callback function with that... but is there a way to check if an element has been loaded using an if statement?

My reasoning... I want to set an interval and check if an element and all it's children have been fully loaded.

var load-interval = setInterval(function(){
    if($('#content').hasBeenLoaded){
        //do stuff
    }
}, 1000);

Upvotes: 1

Views: 2847

Answers (2)

Alnitak
Alnitak

Reputation: 340055

During initial page load, your DOM elements are progressively created as the file is parsed, but image assets are typically loaded asynchronously as they're referenced.

So, as your page loads, the parser will come across the element <div id="mycontent">.

This element will be created immediately, and then its children, and then eventually the closing tag for that div will be found. At that point you could consider that the DOM itself is "loaded" for that element.

The simplest way to execute something then is to put it in a <script> tag immediately after that closing tag.

If you also want to wait for the image assets to load, then this is still the place to put it. You can look for all <img> tags within the previously loaded div, and register onload callbacks, e.g.

<div id="mycontent">
    lots of DOM, including image tags
</div>
<script>
(function() {
    var div = document.getElementById('mycontent'); // guaranteed to exist
    var imgs = div.getElementsByTagName('img');

    // put image load detection code here - exercise for the reader
})();
</script>

Upvotes: 1

gdoron
gdoron

Reputation: 150313

var $content = $('#content');
var intervalId = setInterval(function(){
    if(!$content.is(':empty')){
        //do stuff
        clearInterval(intervalId);
    }
}, 1000);

Just note that elements that contains only text nodes considered to be non empty by the spec:

Upvotes: 2

Related Questions