10
X

Introducing $(document).ready()

read 140 comments

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

JavaScript:
  1. $(document).ready(function() {
  2.     // put all your jQuery goodness in here.
  3. });

The $(document).ready() function has a ton of advantages over other ways of getting events to work. First of all, you don't have to put any "behavioral" markup in the HTML. You can separate all of your javascript/jQuery into a separate file where it's easier to maintain and where it can stay out of the way of the content. I never did like seeing all those "javascript:void()" messages in the status bar when I would hover over a link. That's what happens when you attach the event directly inside an <a href> tag.

On some pages that use traditional javascript, you'll see an "onload" attribute in the <body> tag. The problem with this is that it's limited to only one function. Oh yeah, and it adds "behavioral" markup to the content again. Jeremy Keith's excellent book, DOM Scripting, showed me how to create an addLoadEvent function to a separate javascript file that allows for multiple functions to be loaded inside it. But it requires a fair amount of code for something that should be rather straightforward. Also, it triggers those events when the window loads, which leads me to another advantage of $(document).ready().

Continue Reading Below

With $(document).ready(), you can get your events to load or fire or whatever you want them to do before the window loads. Everything that you stick inside its brackets is ready to go at the earliest possible moment — as soon as the DOM is registered by the browser, which allows for some nice hiding and showing effects and other stuff immediately when the user first sees the page elements.

Update

I thought it might help the absolute beginners to see an example of the <head> where you would include your scripts. Note that CSS stylesheets come before the jQuery file, and the jQuery file comes before your custom script:
HTML:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.  "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  6.   <title>your title</title>
  7.   <link rel="stylesheet" type="text/css" href="styles/forms.css"></link>
  8.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  9.   <script src="yourcustomscript.js" type="text/javascript"></script>
  10. </head>
  11. <body>
  12.   <!-- the body of your document goes here -->
  13. </body>
  14. </html>

It is in "yourcustomscript.js" that you would place your script inside the $(document).ready() block.


comment feed

140 comments

  1. Pete

    Karl & Jörn (first commenter) - Many thanks for the explanation - I just inherited some web code that had the javascript $(document).ready code and the shorter version. It was great to see that they are one and the same.

  2. Good read, but a small correction, you can have mutliple functions in the onload in a body tag...

    <body onload="this();that();anotherOne()">

    This works fine, but yes, it does add extra markup

  3. Mike

    Where is best to include your script tags. Some say to before the head tag, some say bottom before the closing body tag?

  4. Clay Ravin

    Just thought I'd let you know. The following website (google ranking just after yours when searching for "$(document).ready") has completely copied your article without attributing it...
    http://docs.jquery.com/Tutorials:Introducing_$(document).ready().

    Cheers,
    CR

  5. Charles Forest

    this website is great, nice work!

    btw, i think i came here about 100+ times to copy your document.ready because i'm lazy :)

  6. Arun Bhardwaj

    Respected sir,
    i have mention code below and i want to pass the image path dynamically
    in this function .i am new comer so pls help me if possible as soon as.

    jQuery(document).ready
    (
    function ($)
    {

    $('#image1').addimagezoom
    (
    {
    zoomrange: [3, 8],
    magnifiersize: [300,300],
    magnifierpos: 'right',
    cursorshade: true,
    cursorshadecolor: 'pink',
    cursorshadeopacity: 0.3,
    cursorshadeborder: '1px solid red',
    largeimage: '../Admin/ContentImages/Category/decorateimage.JPG' //<-- No comma after last option!

    //
    }
    )

  7. sometimes the page is shown before the ready function is started. how can i execute javascript before the html divs are shown?

    thank you

  8. andrechills

    i'm a newbie a js and seriously need ur help

    where is the call bck function meant to be.the html, body or in the codded js/jquery document.

    i used this call back function

    $(document).ready(function(){

    $('.bxslider').bxslider();

    });
    within the body section of my index.html bt still ve nt been able to get the slider goin/animating,its all stacked there,,,

    the pages i ve all together trying to make this work are:

    1. the index page with tfour links and there separate pages(css,js,custom script)

    <link rel="stylesheet" type="text/css" href="styles.css">

    2.

25 Pings

Sorry, but comments for this entry are now closed.