document.ready 类似于 Javascript 中的功能？ [复制]答案

【问题标题】：document.ready like functionality in Javascript? [duplicate]document.ready 类似于 Javascript 中的功能？ [复制]
【发布时间】：2012-07-29 03:52:41
【问题描述】：

我有一个要求，即只使用纯 JavaScript 而不是 jQuery。我需要在加载 DOM 后立即初始化一些变量（使用某些函数），而不是在页面完全加载时。简而言之，它不应该等待整个页面加载。在 jQuery 中，使用document.ready() 函数可以很容易地完成。

是否可以在 JavaScript 中使用任何函数来实现它？

【问题讨论】：

不，传递给document.ready() 的回调会在DOM 加载 后立即执行。如果您只想在页面开始加载时执行一些代码，请将其放在head 中。如果您能提供一些示例，我们可以为您提供更好的帮助。但是，如果您真的想要相同的功能，只需将脚本放在body 的末尾即可。
jQuery 实际上是开源的，所以如果你想要那个确切的行为，去复制那部分 - 它是纯 javascript。
@Felix：你能把它变成答案吗？
我刚刚更正了这个问题....一旦加载了 DOM，我就需要该功能....正如你们提到的....谢谢.....我只需要使用 javascript 而不是 jquery 实现它。
这个答案解释了stackoverflow.com/a/1207005/759019

标签： javascript dom-events

【解决方案1】：

如果你真的想等待“就绪事件”，你可以使用这种东西：

    (function(w,evt,fn){
        if (w.addEventListener){// W3C DOM
            w.addEventListener(evt,fn,false);
        }
        else if (w.attachEvent) { // IE DOM
            w.attachEvent("on"+evt, fn);
        }

    })(window,'load',function(){
       // your code here
    });

但最好简单地使用放置良好的“脚本”标签，因为您的代码可能会工作并更快开始

【讨论】：

【解决方案2】：

如果支持，您可以使用DOMContentLoaded 事件：

MSDN：http://msdn.microsoft.com/en-us/library/windows/apps/hh868490.aspx

MDN：https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded

【讨论】：

【解决方案3】：

有时是这样实现的

<body>
<!--
All your html tags here
....
....
-->



    <script type="text/javascript">
      //this should execute after the above tags and elements have rendered
    </script>
</body>

【讨论】：

【解决方案4】：

一种“实用”的方法是在文档末尾放置一个script 块（甚至不等同于domready）

  ...
  <script>...</script>
  </body>
</html>

或使用 DomReady 事件的各种纯 js 实现之一，例如 http://snipplr.com/view/6029/domreadyjs/

【讨论】：