在 Google Chrome 浏览器中运行我的(相当复杂的)JavaScript/jQuery 应用程序时,似乎 $(document).ready
会在某些 JavaScript 文件尚未加载时触发。
相关代码(简化):
在我的 HTML 文件中
<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>
作为除 main.js 之外的每个 .js 文件的最后一个语句:
verifyLoad.FOO = true; // where FOO is a property specific to the file
例如
verifyLoad.jquerySupplements = true;
verifyLoad.serialize = true;
在 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');
...
}
令我惊讶的是,我看到了其中一些触发器。这与我对$(document).ready
的理解不符。我错过了什么?
最佳答案
当浏览器从头到尾解析 HTML 文件并将其转换为 DOM 结构时,会触发文档的就绪事件。它不以任何方式保证任何其他资源(例如样式表、图像或本例中的脚本)将会加载。它仅引用 DOM 结构,并且无论页面资源的加载状态如何都会被触发。
如果您想等待资源加载,请使用window
的load
事件,该事件仅在页面上的每个元素都完成加载时触发。
参见:
关于javascript - $(document).ready 到底保证了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6587939/