admin管理员组文章数量:1277901
Running my (rather plex) JavaScript/jQuery application in Google's Chrome browser, it would appear that $(document).ready fires while some of the JavaScript files have not yet loaded.
The relevant code (simplified):
In my HTML file
<script>var httpRoot='../../../';var verifyLoad = {};</script>
<script src="../../../globalvars.js"></script>
<script src="../../../storagekeys.js"></script>
<script src="../../../geometry.js"></script>
<script src="../../../md5.js"></script>
<script src="../../../serialize.js"></script>
...
<script src="../../../main.js"></script>
As the last statement of each of the .js files except main.js:
verifyLoad.FOO = true; // where FOO is a property specific to the file
e.g.
verifyLoad.jquerySupplements = true;
verifyLoad.serialize = true;
In main.js:
$(document).ready(function() {
function verifyLoadTest (scriptFileName, token) {
if (!verifyLoad.hasOwnProperty(token)) {
console.log(scriptFileName + ' not properly loaded');
};
};
verifyLoadTest('globalvars.js', 'globalvars');
verifyLoadTest('storagekeys.js', 'storagekeys');
verifyLoadTest('geometry.js', 'geometry');
verifyLoadTest('md5.js', 'geometry');
verifyLoadTest('serialize.js', 'serialize');
...
}
Much to my amazement, I see some of these trigger. This does not match my understanding of $(document).ready. What am I missing?
Running my (rather plex) JavaScript/jQuery application in Google's Chrome browser, it would appear that $(document).ready fires while some of the JavaScript files have not yet loaded.
The relevant code (simplified):
In my HTML file
<script>var httpRoot='../../../';var verifyLoad = {};</script>
<script src="../../../globalvars.js"></script>
<script src="../../../storagekeys.js"></script>
<script src="../../../geometry.js"></script>
<script src="../../../md5.js"></script>
<script src="../../../serialize.js"></script>
...
<script src="../../../main.js"></script>
As the last statement of each of the .js files except main.js:
verifyLoad.FOO = true; // where FOO is a property specific to the file
e.g.
verifyLoad.jquerySupplements = true;
verifyLoad.serialize = true;
In main.js:
$(document).ready(function() {
function verifyLoadTest (scriptFileName, token) {
if (!verifyLoad.hasOwnProperty(token)) {
console.log(scriptFileName + ' not properly loaded');
};
};
verifyLoadTest('globalvars.js', 'globalvars');
verifyLoadTest('storagekeys.js', 'storagekeys');
verifyLoadTest('geometry.js', 'geometry');
verifyLoadTest('md5.js', 'geometry');
verifyLoadTest('serialize.js', 'serialize');
...
}
Much to my amazement, I see some of these trigger. This does not match my understanding of $(document).ready. What am I missing?
-
2
Are your scripts in
<head>or in<body>? – Mikhail Commented Jul 5, 2011 at 19:40 -
Assuming the answer to @Mikhail's q is "body".
document.readyabsolutely guarantees that scripts inheadare available. Scripts in the body may or may not be and is not predictable. – Jamie Treworgy Commented Jul 5, 2011 at 20:02 -
@jamietre: I'm thinking you're right about OP's scripts being in the body. Too bad he won't answer. I wonder if it would make a difference to place a
<div>or something after the<script>elements so that they have something to block. – user113716 Commented Jul 5, 2011 at 20:04 - Script includes are loaded asynchronously, so inline script could be executed before (or after) any given include is loaded. I am pretty sure this applies to inline includes as well. I think op just needs to move the includes to head and all will be well. – Jamie Treworgy Commented Jul 5, 2011 at 20:10
-
@jamietre: So you're saying scripts loaded via the
<script src="...">elements that were loaded with the rest of the document are asynchronous? Are you sure about that? – user113716 Commented Jul 5, 2011 at 20:19
1 Answer
Reset to default 18The document's ready event is fired when the browser has parsed the HTML file from beginning to end and converted it into a DOM structure. It does not in any way guarantee that any other resources (e.g. stylesheets, images or, as in this case, scripts) will have loaded. It only refers to the DOM structure, and is fired irrespective of the loading status of the page's resources.
If you want to wait for resources to load, use the window's load event, which is fired only when every element on the page has finished loading.
See:
.load.ready
本文标签： javascriptWhat exactly does (document)ready guaranteeStack Overflow
版权声明：本文标题：javascript - What exactly does $(document).ready guarantee? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741304157a2371267.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论