When Does $(document).ready() Fire?

The comments from this question got me thinking about something. When exactly does the $(document).ready() function fire? The obvious answer would be 'when the document is ready,'

Solution 1:

jQuery's ready event for the document fires as soon as jQuery determines that the DOM is accessible. The exact mechanism depends on the browser.

Take a look at the relevant source code.

Firstly, there is a check to see if the DOM is already accessible at the point where an attempt was made to bind a listener to the event. If it is, the callbacks are scheduled to fire immediately - although they are not actually fired immediately, to allow the code already occupying the current execution slot to cancel the handlers if required.

If the DOM is not yet accessible, an attempt is made to bind an event listener to the browser's native DOMContentLoaded event - this is the "correct" native way to ask the browser to inform you when the DOM is available, but it's a relatively modern feature. If this is not possible (this almost certainly indicates you code is running in an older version of IE), the code falls back to a couple of mechanisms:

• Try and attach to the onreadystatechange event of the document. This is not fool-proof and will be later than DOMContentLoaded would have been, but it's pretty good.
• Fall back to the load event of the window object. This will often be much later than the DOM is available, but it's a last-ditch failsafe to ensure the event will always fire eventually.
• The worst case scenario: keep polling the DOM until it's accessible.

From a PHP perspective, it is possible (but unlikely) for this to occur before your PHP script has finished executing. There are situations (such as long-polling) where the event would fire before your script is finished, but this would only occur in older browsers. However, in these scenarios, you wouldn't (shouldn't) be using these events at all, you would simply place the appropriate <script> elements in the body of the page to allow them to be executed as soon as they are loaded, without waiting for the rest of the DOM.

Personally, I never use any of these load-driven events, more or less for that reason. YMMV.

Solution 2:

For instance, if I turned output buffering on and flushed my output while PHP continued executing, wouldn't that send output to the browser?

Yes, it'd send output, but it doesn't mean the browser thinks the server has finished. I know it's not PHP, but I love the Perl article Suffering from Buffering. The document is ready when the UserAgent thinks it's ready. However, the browser will keep the socket open, while it still thinks it's receiving data and no END signal has been sent.

So is there any way the document could be ready before the PHP script has finished executing, or does the event wait until the request has finished?

Typically the browser will wait until the server finishes sending data. If you're flushing the output, it's possible the web server can timeout while the script is still running, for instance, I think Apache has a default of 2 minutes. If the server sends the end signal, your document has finished and your browser may prepare the DOM and fire the DOMReady event, even if your script is still running on the server.

---

Contrary to some other comments </body> and </html> are not good indicators of the DOM being ready, primarily because a page may be malformed (have misspellings or not include those end tags). In those cases, the browser will still render in Quirksmode and fire the DOMReady.

Solution 3:

According to the jQuery site, $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Reference: http://learn.jquery.com/using-jquery-core/document-ready/

Solution 4:

It fires after the the DOM hierarchy has been fully constructed and there is no more PHP code to execute (as PHP code is executed before the page is sent).

This means that it is executed as soon as the page is received by the client. Other things may load afterwards, such as images, CSS and other Javascript.

Solution 5:

Document.ready() is fired when the DOM is done loading. When all the HTML is present, DOM ready event will fire.

PHP will not interfere with DOM ready since PHP is a server-side coding language. It will be proccessed from the server, the server sends the requested page, then your broswer loads the page and the DOM ready event fires.

The difference between DOM ready and window load is that load will wait until every image/css is loaded. The tag is present in the HTML but the image isn't shown.

Basicly, we could say that DOM ready is fired when the browser reads the HTML closing tag (</html>)