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


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


33
2018-05-11 04:18


起源




答案:


查看函数bindReady中的 源代码

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

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

在IE <9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

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


29
2018-05-11 04:24



得爱jQuery! - turtlepick


所以幕后有一点点,但这是它的要点,直接用于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)来说,有一个 DOMContentLoaded jQuery正在侦听的事件,当触发该事件时,它会调用您使用jQuery注册的所有就绪处理程序。

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

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


8
2018-05-11 04:29





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

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

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


5
2018-05-11 04:23