Journey with jQuery - Part I

sankarsan — Sat, 04 Apr 2009 00:39:32 GMT

My journey with jQuery has actually began last month when along with ASP.NET MVC I started exploring the different features provided by jQuery and related plugins.I am simple amazed at the overall design of jQuery core and also by functionalities provided by the various plugins built around jQuery.I am planing to write a series of posts with my observations on jQuery and this happens to be the first in that series.

In this post I will discuss about the magical ready() function in jQuery.I always used to put all the scripts that needs to be executed when the page is loaded in the onload event of the <BODY> tag or set it using window.onload as shown below

This script will execute when the entire page has finished loading including all the images.jQuery exposes a more sophisticated ready event to do the same job as shown below:

This ready checks whether DOM has loaded completely or not.If it is loaded the function is executed else it is pushed to the wait queue as shown below:

ready: function(fn) {
// Attach the listeners
bindReady();

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

    // Otherwise, remember the function for later
    else
      // Add the function to the wait list
        jQuery.readyList.push( fn );

return this;
},

For Internet Explorer it checks the loading status of the DOM using the onreadystatechange event and readyStatus property of the document object as shown below:

document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
        document.detachEvent( "onreadystatechange", arguments.callee );
        jQuery.ready();

So this is in short that's all I had to say about ready event in jQuery.This is the most important function of jQuery and we will use in the samples of the next posts to come.