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

Question

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

Answer 1

查看源代码中的 bindReady函数.

它们绑定到DOMContentLoaded事件(或某些浏览器上的onreadystatechange).如果DOMContentLoaded不受支持或因其他原因未被触发,它们也会回退到常规加载事件.在支持它的浏览器上,他们使用此调用:

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

在IE <9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

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

Answer 2

所以幕后有一点点,但这是它的要点,直接用于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();
            }
        }

因此,对于大多数浏览器(Mozilla,Opera和Webkit),有一个DOMContentLoadedjQuery正在侦听的事件,当触发它时,它会调用您使用jQuery注册的所有现成处理程序.

IE的行为略有不同,因为他们没有DOMContentLoaded事件,他们尝试挂钩onreadystatechange文件的事件,他们也挂钩window.onload事件,以及做一个偷偷摸摸的代码,他们不断尝试每毫秒滚动页面(doScrollCheck).这些火灾中的哪一个首先触发就绪处理程序,并忽略后续事件.

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

Answer 3

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

例如,IE DOMContentLoaded在IE 9之前并不真正支持,但jQuery必须为它提供实现.您可能希望看到这些链接,以了解更多关于此事件是什么以及如何实现类似的东西,即使没有jQuery:

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

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