$(document).ready到底保证了什么？

Question

在谷歌的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.我错过了什么？

Answer 1

当浏览器从头到尾解析HTML文件并将其转换为DOM结构时,将触发文档的ready事件.它不以任何方式保证任何其他资源(例如样式表,图像或在本例中为脚本)将被加载.它只引用DOM结构,并且无论页面资源的加载状态如何都会被触发.

如果要等待加载资源,请使用window's load事件,该事件仅在页面上的每个元素都已完成加载时触发.

看到:

• .load
• .ready