Geeks With Blogs
Sankarsan Bose .NET Diaries

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

<script type="text/javascript">
     function showAlert() {
         alert('Hi');
     }
     window.onload = showAlert;
</script>

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:

<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
            alert('Hi');
    });
</script>

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.

Posted on Friday, April 3, 2009 7:39 PM jQuery | Back to top


Comments on this post: Journey with jQuery - Part I

# re: Journey with jQuery - Part I
Requesting Gravatar...
jQuery give us power like CSS class, as like as define once and push it everywheer. Another flexibility is like xpath query to fetch any control to push its feature.

Even Micosoft will ship jQuery with VS 2010

Left by Sudip Misra on Apr 09, 2009 10:27 PM

Your comment:
 (will show your gravatar)


Copyright © sankarsan | Powered by: GeeksWithBlogs.net