jQuery unveiled: the ready() event method

The ready event method occurs when all the document components have finished loading. It has the following form:

// Is the DOM ready to be used? Set to true once it occurs.
 isReady: false,
 // Handle when the DOM is ready
 ready: function() {
  // Make sure that the DOM is not already loaded
  if ( !jQuery.isReady ) {
   // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
   if ( !document.body ) {
    return setTimeout( jQuery.ready, 13 );

   // Remember that the DOM is ready
   jQuery.isReady = true;

   // If there are functions bound, to execute
   if ( readyList ) {
    // Execute all of them
    var fn, i = 0;
    while ( (fn = readyList[ i++ ]) ) {
     fn.call( document, jQuery );

    // Reset the list of functions
    readyList = null;

   // Trigger any bound ready events
   if ( jQuery.fn.triggerHandler ) {
    jQuery( document ).triggerHandler( "ready" );
  1. jQuery sets a property to check if the DOM is ready to be used (isReady) containing a boolean value (it defaults to false)
  2. checks if the DOM is not already loaded
  3. checks if a reference to the body element exists and sets a little time delay to make sure that IE gets it right
  4. sets the isReady property to true
  5. if there is a list of functions to be executed, it executes all of them by using the call() function
  6. clears the list of functions by setting its value to null to free memory
  7. triggers the ready event

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.