Where to place $(document).ready(function()?

javascript jquery browser

13,817

Solution 1

You can place a script anywhere in the document. Best practice usually advises placing scripts in the footer for page load performance concerns. Further, best practice usually advises placing the scripts together for ease of maintenance.

However, per the spec, there is no restriction on where in the document you place a script tag. You may place them together in the header, at the bottom of the body, sprinkled all over the document, or any combination thereof.

The use of the jQuery construct $(document).ready has the same result regardless of where it is placed within the document. The key is to understand the functionality behind this construct:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.

So, ready is similar to document.onload, but not the same. It doesn't matter where the code is, if you execute it when document.onload is fired or when jQuery fires ready. Code's placement in a document is only significant if it is NOT wrapped by some event handler/listener.

The only restriction on the location on $(document).ready is that it cannot happen before you include the jQuery library. $(document).ready is using jQuery, so if jQuery doesn't exist.... you can't use it.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </head>
    <body onload="alert('executed on document.onload event');">
        <script>
            alert('executed as soon as it is reached (as the document is downloaded)');
            $(document).ready(function () { alert('on jQuery ready'); });
        </script>
    </body>
</html>

Documentation

SCRIPT specification at W3 - http://www.w3.org/TR/html401/interact/scripts.html
script (html 5) specification at W3 - http://www.w3.org/TR/html-markup/script.html
Placing Javascript in your pages at quirksmode - http://www.quirksmode.org/js/placejs.html
Jquery ready - http://api.jquery.com/ready/

Solution 2

AFAIK, $(document).ready event gets raised after DOM is completely loaded so it doesn't matter where you place it.

But they say to write the script at end of the body because page will show up to the end user instantly and javascript will continue to run as background process.

13,817

MEM

Updated on October 15, 2022

Comments

MEM over 1 year
We often read here and there, that we must place our js code either on the page head section or before (sorry) the end body tag. Discussions about this aside, I'm just looking to know what are the reading order for such things by the browsers (taking that they do act as equals here):

Can we place:
```
$(document).ready(function(){
```
No matter where on the page structure, because we are using $(document).ready or should we still place it on the head section ?

Can anyone please clarify this.

If my question isn't clear, I can rephrase.
- Barmar almost 11 years
  
  Since the function isn't executed until the entire page is loaded and ready, it doesn't really matter. There may be a small performance difference.
- Ian almost 11 years
  
  If you put it at the end of the <body>, you won't need the $(document).ready(function () { part because the DOM will be ready
- Jason P almost 11 years
  
  So, nobody has mentioned that there is one restriction: It needs to be after the jquery script reference, no?
- Sparky almost 11 years
  
  "End of the body" does not mean after the </body> tag... it means just before it.
Sunny almost 11 years

You're right, rectified.
collapsar almost 11 years

downvote revoked, comment deleted