代码之家 › 专栏 › 技术社区 › Kyle

jquery(document)多久会被调用?准备好了吗?

jquery

Kyle · 技术社区 · 15 年前

如果第三方javascript文件挂起并需要一段时间加载,将

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

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

3 回复 | 直到 9 年前

Andras Vass 15 年前

是的,必须等一下。尤其是,你不能依赖 jQuery(document).ready() 在其他脚本有机会执行之前激发。 ready 绑定到domcontentready、readystatechanged或onload,以可用的为准。

文件规定: 在大多数情况下,只要完全构造了DOM层次结构,就可以运行脚本。 . 请注意 唯一的保证是当这个事件触发时,DOM已经准备好了。 它不能向你保证任何其他事情——因为它不能。

例如,这在IE、Firefox或Chromium中不起作用, 光辉是 总是叫 之前 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();
        }
    }
},

ScottE 15 年前

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

http://docs.jquery.com/tutorials:introducing_$(document.ready()。

http://docs.jquery.com/tutorials:introducing ou$(document.ready())

Community Mohan Dere 8 年前

第三方JS文件可能被阻塞,特别是在head标签中。试着把它放在 <body> 结束标签。

我认为第一个答案是错误的-document.ready并不意味着必须加载所有内容,它意味着DOM是完整的。否则,在加载所有图像(例如)之前,在其中运行的jquery方法不会运行,这不是真的。

编辑

看起来脚本的行为不同,但可以是特定于浏览器的。这里有一个很好的解释:

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