Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
51
rated 0 times [  55] [ 4]  / answers: 1 / hits: 15210  / 11 Years ago, mon, july 15, 2013, 12:00:00

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.


More From » jquery
 Answers
8

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




[#76985] Sunday, July 14, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shylaelisan
Add To Favorites
Follow
Total Points: 37
Total Questions: 94
Total Answers: 110
Location: Angola
Member since Tue, May 5, 2020
4 Years ago
shylaelisan questions
Sun, Jun 27, 21, 00:00, 3 Years ago
Wed, Nov 11, 20, 00:00, 4 Years ago
Mon, Jul 27, 20, 00:00, 4 Years ago
Thu, Feb 27, 20, 00:00, 4 Years ago
Fri, Aug 23, 19, 00:00, 5 Years ago
View All
;