jQuery的“文档就绪”功能如何工作？

How is jQuery checking if the document is loaded? How it is checking that the document load is finished?

jQuery如何检查文档是否已加载？如何检查文档加载是否已完成？

3 个解决方案

#1

Check out the function bindReady in the source code.

查看源代码中的bindReady函数。

They bind to the DOMContentLoaded event (or onreadystatechange on some browsers). They also have a fallback to the regular load event, in case the DOMContentLoaded isn't supported or not fired for other reasons. On browsers supporting it, they use this call:

它们绑定到DOMContentLoaded事件（或某些浏览器上的onreadystatechange）。如果由于其他原因不支持或不激活DOMContentLoaded，它们也会回退到常规加载事件。在支持它的浏览器上，他们使用此调用：

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

On IE <9:

在IE <9：

document.attachEvent( "onreadystatechange", DOMContentLoaded);

The second instance of DOMContentLoaded in these calls is their own function - actually a reference to the ready function right above bindReady in the source code. This function will check that the DOM tree is actually done by checking for document.body. If it doesn't exist yet, they wait a millisecond (using setTimeout) and check again. When document.body exists, they traverse the list of callbacks you've set.

这些调用中DOMContentLoaded的第二个实例是它们自己的函数 - 实际上是对源代码中bindReady正上方的ready函数的引用。此函数将通过检查document.body来检查DOM树是否实际完成。如果它还不存在，它们会等待一毫秒（使用setTimeout）并再次检查。当document.body存在时，它们会遍历您设置的回调列表。

#2

So there is a little bit going on behind the scenes but this is the gist of it, directly for the jQuery source:

所以幕后有一点点，但这是它的要点，直接用于jQuery源：

// 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();
            }
        }

So for most browsers (Mozilla, Opera and Webkit) there is a DOMContentLoaded event that jQuery is listening for, when that is triggered, then it calls all of the ready handlers you have registered with jQuery.

因此，对于大多数浏览器（Mozilla，Opera和Webkit），有一个jQuery正在侦听的DOMContentLoaded事件，当触发该事件时，它会调用您使用jQuery注册的所有就绪处理程序。

IE acts a little differently as they don't have the DOMContentLoaded event, they try hooking into the onreadystatechange event of the document, they also hook up the window.onload event, as well as do a sneaky bit of code where they continuously try and scroll the page every millisecond (doScrollCheck). Which ever one of these fires first triggers the ready handlers and the subsequent events are ignored.

IE的作用有点不同，因为它们没有DOMContentLoaded事件，它们尝试挂钩到文档的onreadystatechange事件，它们还连接了window.onload事件，并且在他们不断尝试的时候做了一些偷偷摸摸的代码。每毫秒滚动页面（doScrollCheck）。这些火灾中的哪一个首先触发就绪处理程序，并忽略后续事件。

I hope that makes sense and helps you out :)

我希望这有道理并帮助你:)

#3

jQuery doesn't do anything that JavaScript cannot/does not do - it's simply a JavaScript framework/library. What it does is provide wrappers around JavaScript events that browsers implement, such as onload ($.load()) and DOMContentLoaded ($.ready()). Of course, there is a lot of work under the hood that attempts to make this behaviour as standard as possible across browsers and works around browser bugs, issues and incompatibilities.

jQuery没有做任何JavaScript不能/不做的事情 - 它只是一个JavaScript框架/库。它的作用是为浏览器实现的JavaScript事件提供包装器，例如onload（$ .load（））和DOMContentLoaded（$ .ready（））。当然，有很多工作要尝试在浏览器中尽可能地标准这种行为，并解决浏览器错误，问题和不兼容问题。

For example, IE didn't really support DOMContentLoaded before IE 9 but jQuery has to provide an implementation for it. You might want to see these links to understand more about what this event is and how one might implement something similar, even without jQuery:

例如，IE在IE 9之前并不真正支持DOMContentLoaded，但jQuery必须为它提供实现。您可能希望看到这些链接以了解更多有关此事件的内容以及如何实现类似的内容，即使没有jQuery：

http://api.jquery.com/ready/#comment-85629494
http://api.jquery.com/ready/#comment-85629494
http://www.zachleat.com/web/domcontentloaded-inconsistencies/
http://www.zachleat.com/web/domcontentloaded-inconsistencies/
http://www.kryogenix.org/days/2007/09/26/shortloaded
http://www.kryogenix.org/days/2007/09/26/shortloaded
$(document).ready equivalent without jQuery
没有jQuery的$（document）.ready等价

If you really want to see what's being done by jQuery, you should check out the jQuery source.

如果你真的想看看jQuery正在做什么，你应该查看jQuery源代码。

#1