jQuery(document).ready 多久会被调用？答案

【问题标题】：How soon will jQuery(document).ready be called?jQuery(document).ready 多久会被调用？
【发布时间】：2011-01-24 17:57:11
【问题描述】：

如果第三方 javascript 文件挂起并需要一段时间才能加载，会

jQuery(document).ready(function() {})

在被调用之前必须等待加载？

【问题讨论】：

标签： jquery

【解决方案1】：

我认为 $(document).ready() 在加载和呈现 html 文档时运行。阅读文档了解更多信息

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

【讨论】：

ready() 在 John Resig 决定应该运行时运行。它可以在不同的浏览器上运行，甚至可以在不同时间运行在同一浏览器的不同版本上。您不能依赖它在其他脚本有机会执行之前触发您的事件处理程序。唯一可以确定的是，当它触发时，您可以访问 DOM。

【解决方案2】：

是的，它必须等待。特别是，您不能依赖jQuery(document).ready() 在其他脚本有机会执行之前触发。 ready 绑定到 DOMContentReady、readystatechanged 或 onload，以可用者为准。

文档指出“在大多数情况下，只要完全构建 DOM 层次结构，就可以运行脚本”。请注意，唯一的保证是当此事件触发时 DOM 已准备就绪。 它不能向您保证其他任何事情 - 因为它不能。

例如，这在 IE、Firefox 或 Chromium 中不起作用，brilliant.js 在ready() 处理程序有机会执行之前总是被调用你如何洗牌脚本标签：

<!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>

仅供参考，这里是来自 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();
        }
    }
},

【讨论】：

【解决方案3】：

第 3 方 js 文件可能会被阻塞，尤其是在 head 标签中时。尝试将它放在 <body> 结束标记之前。

我认为第一个答案是不正确的 - document.ready 并不意味着必须加载所有内容，它意味着 dom 是完整的。否则，在 this 中运行的 jquery 方法在加载所有图像（例如）之前不会运行，这是不正确的。

编辑

脚本的行为似乎有所不同，但可能是特定于浏览器的。这里有一个很好的解释：

JavaScript: DOM load events, execution sequence, and $(document).ready()

【讨论】：

根据 Mozilla 关于“DOMContentLoaded”事件的文档，“ready”和“load”之间的主要区别在于页面在调用“ready”之前不会等待图像加载（即，在 Firefox 或 Webkit 中的“DOMContentLoaded”处理程序）。没有说明正在完成的脚本文件。鉴于我们谈论的是单线程模型，我看不到在浏览器仍在解析/执行它在 <body> 结束之前遇到的 <script> 块时如何调用“就绪”处理程序.
在正文末尾加载慢速脚本的测试页面总是导致该脚本在调用 jQuery“就绪”处理程序之前完成。