如何在 JavaScript 中检测 document.ready？ [复制]答案

【问题标题】：How to detect document.ready in JavaScript? [duplicate]如何在 JavaScript 中检测 document.ready？ [复制]
【发布时间】：2011-04-18 07:31:46
【问题描述】：

可能重复：
$(document).ready equivalent without jQuery

我有一个在加载时执行的无框架 javascript：

function myJs() {    
   // some code
}
window.load = myJs;

但这会导致脚本执行延迟。我希望能够在文档准备好进行操作时立即执行此脚本，甚至在页面完全完成加载之前。如何以跨浏览器兼容的方式完成此操作？换句话说，如何：

$(document).ready(function() {  
   //
});

jQuery的用纯JS说？

【问题讨论】：

打开jquery查看.ready函数。

标签： javascript jquery

【解决方案1】：

你可以在任何你不会的地方创建一个函数，调用它

`<body onLoad="function();">`

【讨论】：

【解决方案2】：

放

function myJs() {    
   // some code
}

在<head></head> 和

window.load = myJs;

就在</body>之前

【讨论】：

你能解释一下而不是-1 ing我。也许我会学到一些东西。
.load 与.ready 不同——.load 在执行前等待所有图片、脚本、外部资源等加载完毕，而.ready 在所有 DOM 资源加载完毕后执行加载（即 HTML 结构）。因此，如果一个页面同时具有.ready 和.load，则.ready 将在.load 之前执行
我看到并经过反思（在我重新阅读问题后，我误解了）我同意。但是，然后，@Josh Stodola，而不是这个蹩脚和无用的答案和 -1 ing 每个人，为什么不直接用这个解释回答这个家伙呢？ :) 我很确定这是 stackoverflow 回答和解释的目标（即使我刚刚注册）
@Couchenos 很好，我刚刚去投票了你在其他地方的两个很好的答案。这不是一个好的答案，所以我投了反对票。大不了。我不需要解释自己......很明显，这个答案是不正确且具有误导性的。
@Josh Stodola ：如果看起来是这样，请原谅我，但我不怪你 -1，而是像“Ummmmmmmmmmm no”这样的评论并且没有解释。这对您来说似乎很明显，但对所有试图提供帮助的人来说并非如此；）。更重要的是，如果您没有正确回答原始提问者！仍然我的回答是错误的，它没有回答我误读的问题，所以我应得的。我不在乎我的“分数”或它的名字。

【解决方案3】：

//old IE
document.onreadystatechange = function() {
   if (this.readyState === "complete"){
      //whatev
   }
};


//for everyone else
document.addEventListener("DOMContentLoaded", function () {
  //whatev
  }, false);

【讨论】：

唯一原生支持DOMContentLoaded的IE版本是9。
旧版IE改为onDOMContentLoaded，谢谢提醒。
不是 100% 确定，但很确定 IE on。而且我认为您的意思是在 attachEvent 函数中添加“on”。

【解决方案4】：

我已经做了一个你可以使用的实现（基于 jQuery 中的那个）：http://github.com/jakobmattsson/onDomReady/blob/master/ondomready.js

【讨论】：

嘿，对 js jere 很陌生。您能否展示如何实现这一点。我会做类似的事情： onDomReady(function() { //code here }); ?
你完全正确:)
如果您愿意，也可以使用不同的 code-sn-ps 多次调用 onDomReady。它们都将按顺序执行。如果还不清楚，您必须在拨打电话之前包含我的代码。此外，如果您想更改函数的名称（“onDomReady”），请仅在第 10 行进行。
效果很好，非常感谢！

【解决方案5】：

实际上并没有那么糟糕。您需要一种将事件添加到document 的方法，以及这些事件应该是什么的知识。使用标准的addEvent函数

function addEvent( obj, type, fn )
{
 if (obj.addEventListener)
 {
   obj.addEventListener( type, fn, false );
 }
 else if (obj.attachEvent)
 {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { return obj["e"+type+fn]( window.event ); };
  obj.attachEvent( "on"+type, obj[type+fn] );
 }
}

您可以执行以下操作：

// IE
addEvent(document, 'DOMContentLoaded', function() {
    alert('ready');
});

// Other
addEvent(document, 'onreadystatechange', function() {
    if (document.readyState == 'complete')
        alert('ready');
});

// For demonstration purposes, show a 'load' event
addEvent(window, 'load', function() {
    alert('load');
});

IE 事件处理程序不会在其他浏览器中触发，反之亦然。

【讨论】：

你交换了 IE 和其他我猜的

【解决方案6】：

但这会导致脚本执行延迟。我希望能够在文档准备好后立即执行此脚本甚至在页面完全加载完成之前进行操作。

你可以通过三种方式来解决这个问题：

正如一些人已经建议的那样，您可以从 jQuery 源代码中汲取灵感并将其集成到您的脚本中。（我推荐看Paul Irish on jQuery Source和看JS Libs Deconstructed。
您可以将函数调用放在 body 标记的末尾而不是 head 标记中。这允许在脚本启动之前加载所有 DOM 元素。
如果您不需要使用 DOM，则可以将其设置为自执行函数，这样您就不必等待任何事情。 (function startNow(){}())

【讨论】：