Running jQuery code before the DOM is ready?

Question

Is there a way to execute jQuery code before the DOM is ready ?

Yes there is, but given that jQuery is primarily intended to amend the DOM, why would you want to? — Rory McCrossan, Sep 26 '12 at 09:10
see:: http://stackoverflow.com/questions/4124765/how-to-load-jquery-before-dom-is-ready — Sudhir Bastakoti, Sep 26 '12 at 09:11

score 20 · Accepted Answer · edited Dec 07 '13 at 17:46

jQuery is just Javascript, so the question is really "Is it possible to run JavaScript before the DOM is ready" and with that I'm guessing you mean the document and not DOM.

If we can agree that the question is "Is it possible to run JavaScript before the document is ready". Then the answer is yes. The JavaScript will be executed when encountered.

That's why you almost always see either $(function(){...})or $(document).ready(function(){...}) because most jQuery code requires the document to be ready but the code attaching the event handler is certainly executed before the document is ready (otherwise it wouldn't be able to handle the document ready event).

Usually you should place your Javascript includes at the bottom of your HTML but if you want it executed earlier you can simply place it earlier in the document e.g. in the header.

<html>
  <head>
     ...
     <script>
        //place your code to be executed early here
     </script>
  </head>
...
</html>

score 3 · Answer 2 · answered Sep 26 '12 at 09:13

If you include jQuery in the head of your document, and then write your code in another script tag in the head, it will run before the DOM is ready:

<head>
    <script src="jquery.js"></script>
    <script>
        // Do some stuff before the DOM is ready
    </script>
</head>
<body>
    <!-- Browser hasn't got this far, so no elements will be available -->
</body>

However, obviously you won't be able to interact with any DOM elements, since they won't exist yet.

Having said that, there is a technique you can use in modern browsers that can allow you to interact with DOM elements as they are inserted into the page (while the browser is rendering it). It relies upon CSS animation events. I've written a simple library (Progressive.js) to make this easier to handle.

Running jQuery code before the DOM is ready?

2 Answers2

Linked