8

If a third party javascript file hangs and takes a while to load, will 

jQuery(document).ready(function() {})

have to wait for that to load before being called?

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Kyle
  • 21,377
  • 37
  • 113
  • 200

3 Answers3

13

Yes, it has to wait. In particular, you cannot rely on jQuery(document).ready() to fire before other scripts get a chance to execute. ready binds to DOMContentReady, readystatechanged, or onload, whichever is available.

The documentation states that "in most cases, the script can be run as soon as the DOM hierarchy has been fully constructed". Note that the only guarantee is that the DOM is ready when this event fires. It does not guarantee you anything else - because it just cannot.

This, for example will not work in IE, Firefox or Chromium, brilliant.js is always called before the ready() handler has a chance to execute no matter how you shuffle the script tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js" charset="utf-8" type="text/javascript" ></script>
</head>
<body>
    <script type="text/javascript" >
    // <![CDATA[
        alert("attaching event");
        $(document).ready(function () { alert("fired"); });
    // ]]> 
    </script>
    <script type="text/javascript" src="brilliant.js" ></script>
</body>
</html>

FYI, here is the relevant code from jquery-1.4.2:

bindReady: function() {
    if ( readyBound ) {
        return;
    }

    readyBound = true;

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        return jQuery.ready();
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},
Andras Vass
  • 11,478
  • 1
  • 37
  • 49
2

i think $(document).ready() runs when the html document has been loaded and rendered. Read the documentation for more info

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

ScottE
  • 21,530
  • 18
  • 94
  • 131
Peter
  • 37,042
  • 39
  • 142
  • 198
  • `ready()` runs when John Resig decides it should run. It can run on different browsers or even on different versions of the same browser at different times. You cannot rely on it firing your event handler before other scripts get a chance to execute. The only thing you can tell for sure is that you can get to the DOM when it fires. – Andras Vass Mar 07 '10 at 20:26
2

The 3rd party js file may be blocking, especially if it's in the head tag. Try putting it just before the <body> closing tag.

I think the first answer is incorrect - document.ready doesn't mean that all content has to be loaded, it means that the dom is complete. Otherwise, jquery methods run inside this wouldn't run until all images (for example) were loaded, which is not true.

Edit

It looks like the behaviour is different for scripts, but can be browser specific. There is a good explanation here:

JavaScript: DOM load events, execution sequence, and $(document).ready()

Community
  • 1
  • 1
ScottE
  • 21,530
  • 18
  • 94
  • 131
  • 1
    According to Mozilla documentation for the "DOMContentLoaded" event, the key difference between "ready" and "load" is that the page doesn't wait for images to load before calling "ready" (i.e., the "DOMContentLoaded" handler when in Firefox or Webkit). Doesn't say anything about script files being done. Given that we're talking about a single-threaded model, I don't see how the "ready" handlers could be called while the browser were still parsing/executing a ` – Pointy Mar 07 '10 at 19:48
  • 1
    A test page with a slow script loaded at the end of the body always results in that script finishing before the jQuery "ready" handler is invoked. – Pointy Mar 07 '10 at 20:06