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

Question

在 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的理解不符。我缺少什么？

Answer 1

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

如果您想等待资源加载，请使用 window 的 load 事件，该事件仅在页面上的每个元素完成加载时触发。

请参阅：

• .load
• .ready