如何在不使用 jQuery（替代方式）的情况下知道页面何时准备就绪？ [复制]
Posted
技术标签:
【中文标题】如何在不使用 jQuery（替代方式）的情况下知道页面何时准备就绪？ [复制]【英文标题】：How to know when page is ready without using jQuery (alternative way)? [duplicate] 【发布时间】：2012-01-24 10:41:42 【问题描述】：可能重复：$(document).ready equivalent without jQuery
如果您在页面中调用了 jQuery。你可以简单地做到这一点：
$(document).ready(function() /** code inside **/);
但是没有jQuery怎么做类似的事情呢？
【问题讨论】：
您应该注意，只要 DOM 准备好，ready() 就会被调用，这可能是在onload 事件触发之前的一段时间。 （正如您可能在 jQuery 源代码中看到的那样，这并不总是发生，因为 onload 是备用）。
【参考方案1】：
您可以使用DOMContentLoaded 事件。
document.addEventListener('DOMContentLoaded', function()
// ...
);
请注意，在较旧的 IE 中您需要解决方法，如果我没记错的话，有些会使用 readystatechange 事件。
【讨论】：
假设您不关心支持旧浏览器... 谢谢，alex，好代码！ 请注意DOMContentLoaded 在 CSSOM 加载之前触发。因此，在没有 jQuery 的情况下使用 DOMContentLoaded 的任何人都必须先手动触发页面重排/重绘。
document. 在开始时不需要。 DOMContentLoaded 也将在window（或一般globalThis）上触发，addEventListener(…) 暗示window.addEventListener(…)。【参考方案2】：
我认为回答您问题的最简单方法是回答“jQuery 是如何做到的？”为此，我建议您查看源代码。代码中最相关的部分位于 https://github.com/jquery/jquery/blob/master/src/core.js#L423
这是一个sn-p：
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" )
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( jQuery.ready, 1 );
// 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();
【讨论】：
+1，正要发布同样的内容。 非常酷而且内容丰富，让我想看看 jQuery 源码【参考方案3】：window.onload = function()
// do something
【讨论】：
这与 DOM 就绪不一样。【参考方案4】：使用以下脚本：
<script type="text/javascript">
function funtionToBeCalled()
// code that will be exected after dom ready
window.onload=funtionToBeCalled;
</script>
或者还有另一种方法。在 body 标签中添加 onload 事件如下：
<body onload='functionToBeCalled();'>
</body>
【讨论】：
以上是关于如何在不使用 jQuery（替代方式）的情况下知道页面何时准备就绪？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 jquery 插件的情况下快速跳转到下一部分？
如何在不使用jQuery的情况下获取元素的offset（）。top值？
我们如何在不重新加载页面的情况下使用 javascript/jQuery 更新 URL 或查询字符串？
CORS 谷歌浏览器扩展有啥替代品吗？如何在不使用 CORS 的情况下成功发出 ajax 请求？