如何挂钩DOM加载的事件？

Can someone point me in the direction to hook the DOM loaded event?

有人能指出我挂钩DOM加载事件的方向吗？

Basically, i want to display a loader while the dom is loading (I dont mean Ajax requests- the first time a user hits a page) ?

基本上，我想在dom加载时显示加载器（我不是指Ajax请求 - 用户第一次点击页面时）？

Thanks all in advance

提前谢谢

4 个解决方案

#1

All of the popular Javascript libraries have a "DOM loaded" event you can use for this.

所有流行的Javascript库都有一个“DOM加载”事件，您可以使用它。

Essentially:

主要有：

<html>
<head>
    <script>
    // if using jQuery
    $(document).ready(function() { $('#loading').hide(); });
    // if using Prototype
    document.observe("dom:loaded", function() { $('loading').hide(); });
    </script>
</head>
<body>
    <div id="loading">Loading...</div>
    <!-- rest of page -->
</body>
</html>

#2

If you're not using a framework, use the DOMContentLoaded event:

如果您没有使用框架，请使用DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
  // ...
})

#3

Just to provide an alternative to jQuery, YUI Event provides an onDomReady() function for this purpose as well. Here's the example from their site:

为了提供jQuery的替代方案，YUI Event也为此提供了一个onDomReady（）函数。以下是他们网站的示例：

 <script type="text/javascript">

 function init() {
    YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");
 }
 YAHOO.util.Event.onDOMReady(init);

 </script>

#4

The proper way to do this without a library (and really, even with a library, since you're dealing with script blocking and IE unpredictability) is to put a script at the very end of the page:

在没有库的情况下执行此操作的正确方法（实际上，即使使用库，因为您正在处理脚本阻塞和IE不可预测性）是将脚本放在页面的最后：

onLoaded = function(){ ... }

onLoaded()

装载的（）

#1