Geek Answers Handbook

How soon will jQuery (document) .ready be called?

If a third-party javascript file freezes and takes some time to load, there will be

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

Need to wait for a download before calling?

+7
jquery
source share
3 answers

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

The documentation states that "in most cases, a script can be run as soon as the DOM hierarchy is fully built." Please note that it only guarantees that the DOM is ready when this event fires. This does not guarantee you anything else - because it simply cannot.

This, for example, will not work in IE, Firefox or Chromium, brilliant.js is always called before the ready() handler has the ability 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 corresponding 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(); } } },
+13
source share

I think $ (document) .ready () is fired when the html document is loaded and displayed. Read the documentation for more information.

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

+2
source share

The third member of the js file may be blocked, especially if it is in the main tag. Try putting it immediately before the closing tag <body> .

I think the first answer is incorrect - document.ready does not mean that all content should be loaded, it means that dom is complete. Otherwise, the jquery methods running inside this will not execute until all images have been loaded (for example), which is incorrect.

Edit

It appears that the behavior is different from the scripts, but may be browser specific. There is a good explanation here:

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

+2
source share

More articles:


All Articles