The document ready handler of jquery

Created at 2008-05-23 02:14:25 | 0  Comments ↓ |     Digg   Stumble It!    Del.icio.us   

When embracing Unobtrusive JavaScript, behavior is separated from structure, so we'll be performing operations on the page elements outside of the document markup that creates them. In order to achieve this, we need a way to wait until the DOM elements of the page are fully loaded before those operations execute. In the zebra-striping example, the entire table must load before striping can be applied.

Traditionally, the onload handler for the window instance is used for this purpose, executing statements after the entire page is fully loaded. The syntax is typically something like

window.onload = function() {
$("table tr:nth-child(even)").addClass("even");

This causes the zebra-striping code to execute after the document is fully loaded. Unfortunately, the browser not only delays executing the onload code until after the DOM tree is created but also waits until after all images and other external resources are fully loaded and the page is displayed in the browser window. As a result, visitors can experience a delay between the time that they first see the page and the time that the onload script is executed.

Even worse, if an image or other resource takes a significant time to load, visitors would have to wait for the image loading to complete before the rich behaviors become available. This could make the whole Unobtrusive JavaScript movement a non-starter for many real-life cases.

A much better approach would be to wait only until the document structure is fully parsed and the browser has converted the HTML into its DOM tree form before executing the script to apply the rich behaviors. Accomplishing this in a cross-browser manner is somewhat difficult, but jQuery provides a simple means to trigger the execution of code once the DOM tree, but not external image resources, has loaded. The formal syntax to define such code (using our striping example) is as follows:

First, we wrap the document instance with the jQuery() function, and then we apply the ready() method, passing a function to be executed when the document is ready to be manipulated.

We called that the formal syntax for a reason; a shorthand form used much more frequently is as follows:

$(function() {
$("table tr:nth-child(even)").addClass("even");
});

By passing a function to $(), we instruct the browser to wait until the DOM has fully loaded (but only the DOM) before executing the code. Even better, we can use this technique multiple times within the same HTML document, and the browser will execute all of the functions we specify in the order that they are declared within the page. In contrast, the window's onload technique allows for only a single function. This limitation can also result in hard-to-find bugs if any third-party code we might be using already uses the onload mechanism for its own purpose (not a best-practice approach).

We've seen another use of the $() function; now let's see yet something else that it can do for us.

0 Comments

No comments yet, be the first to comment!

Name: Email: Website: Comment: