什么是DOM ready事件?

sil*_*min 15 javascript domready

我需要在收到页面内容(整个HTML元素)后立即触发脚本,但不必渲染它.

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

以不同方式表达问题:DOM准备好是否已经拉动并呈现了所有元素和资源?

Ode*_*ded 32

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

它发生页面完全呈现之前(因为外部资源可能尚未完全下载 - 包括图像,CSS,JavaScript和任何其他链接的资源).

调用实际事件DOMContentLoaded.


dev*_*l69 7

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


小智 5

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

window.onload = function(){
   //your code
  }
Run Code Online (Sandbox Code Playgroud)

要么

body.onload = function(){
   //your code
  }
Run Code Online (Sandbox Code Playgroud)

如果您不想使用jQuery。

不过请注意,加载DOM并不意味着加载页面,该事件之后可能会加载iframe,javascript,图像和CSS。

关于DOM事件的教程很好


Jan*_*lik 5

我需要在收到页面内容(整个 HTML 元素)后立即触发脚本,但还不必呈现它。

我认为只有一个简单的标签在我的页面顶部执行一些代码就可以解决问题吗?

这是可能的,然后你想要DOMContentLoaded事件。您可以这样使用它:

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

换一种方式表述这个问题:DOM 就绪是否意味着所有元素和资源都已被拉取和呈现?

没有“ DOM 就绪”事件。您可能会想到jQuery 的.ready(),或者这个术语的一些类似奇怪的用法(例如,Google 也有一个类似名称的专有事件,它们指的是)。

DOMContentLoaded但是,对于该事件(引用MDN):

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发,无需等待样式表、图像和子框架完成加载。