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

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/

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.

Tags:

Javascript

Browser

Jquery

Recent Posts