Question

我需要在收到页面内容（整个HTML元素）后立即触发脚本，但它还不必渲染。

我假设只有一个简单的<script>标签在我的页面顶部执行一些代码应该可以解决这个问题吗？

以不同方式表达问题：DOM准备好是否已将所有元素和资源拉并呈现？

Answer 1

DOM就绪意味着浏览器已经接收并解析了所有HTML，现在可以对其进行操作。

在页面完全呈现之前发生（因为外部资源可能尚未完全下载 - 包括图像，CSS，JavaScript和任何其他链接资源）。

实际事件称为DOMContentLoaded。

Answer 2

DOMready意味着：DOM结构已构建在浏览器内存中。异步页面已经开始渲染，但它可能还没有完成，因为图像，视频等外部资源将在稍后完成加载。

Answer 3

您也可以尝试使用这些功能

window.onload = function(){
   //your code
  }

或

body.onload = function(){
   //your code
  }

如果你不想使用jQuery。

但要小心，DOM加载并不意味着页面加载，iframe，javascript，图像和css可能会在该事件后加载。

DOM事件Javascript tutorial

上有一个很好的tuto

Answer 4

我需要在收到页面内容（整个HTML元素）后立即触发脚本，但是还不必渲染。

我认为仅在页面顶部使用一个简单的标签就可以执行一些代码就可以了吗？

那么您可能想要the DOMContentLoaded event。您可以这样使用它：

    <head>
    <!-- … --->
        <script>
window.addEventListener('DOMContentLoaded',function () {
    //your code here
});
        </script>
    </head>

用不同的方式来表达这个问题：DOM是否准备就绪意味着所有元素和资源都已被提取和呈现？

没有“ DOM就绪”事件。您可能会想到jQuery's .ready()或该术语的某种类似用法（例如Google所引用的专有事件也类似）。

但是对于DOMContentLoaded事件（引用MDN）：

在完全加载并解析了初始HTML文档之后，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。

Answer 5

文档对象模型（DOM）是一种跨平台且与语言无关的约定，用于表示HTML，XHTML和XML文档中的对象并与之交互。[1]每个文档的节点都以树结构组织，称为DOM树

什么是DOM ready事件？

5 个答案: