如何挂钩DOM加载的事件?

时间:2009-02-24 16:24:42

标签: html dom load

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

基本上,我想在dom加载时显示一个加载器(我不是指Ajax请求 - 用户第一次点击页面时)?

提前全部谢谢

4 个答案:

答案 0 :(得分:29)

如果您没有使用框架,请使用DOMContentLoaded事件:

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

答案 1 :(得分:10)

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

本质:

<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 :(得分:0)

为了提供jQuery的替代方案,YUI Event也为此提供了onDomReady()函数。以下是他们网站上的示例:

 <script type="text/javascript">

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

 </script>

答案 3 :(得分:0)

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

    onLoaded = function(){...}

         装载的()