How to check if document is ready?

Question

How to check if document is ready (all js files loaded, DOM is ready) through jQuery? Is there any flag?

Facing issues if some of the files are not downloaded completely, and the event is raised by user. I want to check inside event handler.

I am using jQuery, asp.net

Answer 1

Is this a trick question? :)

What you're looking for is document.ready

Example:

  $(document).ready(function() {

   alert ("document is ready!");

  });

Answer 2

Jquery has this:

$(document).ready(function(){ 
    alert('document ready here') 
}); 

It's become fairly common practice to wrap any jquery that manipulates the DOM in a $(document).ready() block, to ensure the DOM is all there before proceeding.

Answer 3

$(document).ready(function() {
  // Handler for .ready() called.
});

Answer 4

http://api.jquery.com/ready/ - example as at the bottom of the page

Answer 5

A simple function call to see if the base is even loaded.

   jQuery(document).ready(function(){ 
      alert("howdy");  
    }); 

alternative, find out if it is loaded (better)

<script type="text/javascript">  
if (typeof jQuery == 'undefined')  
{  
    alert('not loaded'); 
}  
</script>

FOR THE SHORT NUTS OUT THERE: (no typeof needed :)

<script type="text/javascript">  
    if(!this.$) 
    {  
        alert('not loaded'); 
    }  
    </script> 

Answer 6

Thought the document.ready code was only triggered when the document and all files where loaded. Never had problems with that myself.

If I had the problem, I would either place a var in all files needed and check if they add up, place all code in one file.

Forgive me for not posting a definitive answer

Answer 7

Are you looking for the native window.onload event by any chance? It's fired when everything on the page (including scripts, images, stylesheets) have loaded.

function doStuff() {
    alert("The DOM and everything inside have loaded");
}
window.onload = doStuff; 

See also: addLoadEvent.

Answer 8

This isn't documented, I don't think, but if you look at the jQuery code for $(document).ready:

// If the DOM is already ready
if ( jQuery.isReady ) {
  // Execute the function immediately
  fn.call( document, jQuery );
} // ...

Thus, for a way that may change, you can use $.isReady or jQuery.isReady.

A better way would be to use $(document).ready in line. e.g.:

function myClickHandler(event) {
  // do stuff

  $(document).ready(function() {
    // Do this immediately if DOM is loaded, or once it's loaded otherwise.
  }
}

Essentially, this uses the ready function as a guard. Instead of an if statement, you use the ready function. Of course, the ready function has the behavior that it will run once the DOM is loaded. If your behavior is only wanting something to happen if it's loaded, but never doing it if the DOM isn't loaded yet, then using the flag above, or setting your own, is the better way to go. Setting your own:

$(document).ready(function() {
  window.domIsReady = true;
}

if (window.domIsReady) {
  // do stuff
}

Creating your own is probably better, since jQuery.isReady doesn't seem to be documented, and therefore probably isn't supported and may be changed at any time.