Menu
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?
206
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();
}
}
},
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()
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
