Document Ready Event and jQuery – Lazy Initialization

To perform any operation on a DOM element, it must be created first. While a JavaScript file or script loaded in the head section of HTML executes instantly. Such scripts will find that DOM is not completely created. So, the actions dependent on various DOM element-ID’s and classes will fail. In the past, tricks like writing the JavaScript after the closing HTML tag or after the element definition were used.
So, there has to be a way to delay JavaScript execution till document is loaded completely. Manual setTimeout() cannot accurately identify the time required to load the document on various clients using different internet speeds. The JavaScript libraries recognized this problem and created a mechanism to accurately identify the state when the DOM is loaded and is ready to accept the script. Additionally, functions are also provided to identify when a user exits a page. Very often, it is desired to fire a function to double check whether the user really meant to navigate away from the page.

.ready() – executes when the DOM is fully loaded

In jQuery, The .ready() method is used to protect the script executing too early, i.e. before the DOM is loaded. The script won’t always perform properly if it is executed before DOM is ready. The general syntax of the function is

.ready(handler) 

where handler is the function that is executed after the DOM is ready. This method waits for the DOM to be ready for any operations before the handler is fired.
Generally, entire script is made a callback function to be fired by the .ready() handler:

$(document).ready(function(){
// All jQuery functionality here
});

So, typically, the handler is an anonymous function. All the events handlers can be written in a separate file.

Avoiding javascript:void() message

Events are no longer written in the HTML definition of DOM elements like the anchor tag. So, on an anchor mouseover, you will not see the javascript:void() message in the browser status bar; yet, the event handler defined in the jQuery script will perform the same desired action.

Design Pattern – Lazy Initialization

The .ready() method is an implementation of Lazy Initialization. Lazy Initialization is a design pattern where you employ a tactic of delaying any resource centric processes until the first instance where they are needed.
Alternatively, the following syntax can also be used as the short version of the .ready method.

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

Update – 30th Dec 2011

The jQuery documentation also lists a third syntax for the .ready method. Alongside the syntax, it says that the syntax is not recommended.

$().ready(handler) (This syntax is not recommended)

The syntax is deprecated since version 1.4 of jQuery. This could be the possible reason behind the suggestion.

Moreover, the ready() method can be bound with the .bind() method as well.

 $(document).bind("ready", handler)

The only limitation of the above syntax is that if the .ready() event is already fired then the handler bound with the .bind() method will not get fired.
The .ready() method, which is an entry point for all jQuery script, accepts a parameter to use as an alias for the jQuery function.

jQuery.ready(function($){
// All jQuery functionality here
$("p").fadeOut();
});

Any alias can be passed to the anonymous function. So, the following code will work same as the above code:

jQuery(document).ready(function(Refulz){
Refulz("p").fadeOut();
});

The above examples illustrate how aliasing works with jQuery. Later, we will also learn about aliasing and its benefits.

  • http://www.poetro.hu/ Poetro

    You forgot about the best way:
    jQuery(function ($) {
      $(“p”).fadeOut();
    });
    It is the shortest and works in noConflict mode too.

    • Anonymous

      Thanks for the addition and the continued interest in the blog.

      In the example, the intention was to highlight aliasing and not the short syntax of .ready method.

      I am also updating the post to accommodate the third syntax for .ready method. It was pointed out by a reader on dzone. The query was why the third syntax is highlighted as “not recommended” in the documentation.

  • Pingback: Aliases for jQuery Namespace | Refulz PHP