📌  相关文章
📜  onload - Javascript (1)

📅  最后修改于: 2023-12-03 15:18:06.805000             🧑  作者: Mango

Onload - Javascript

onload 是 Javascript 中一个重要的事件处理器，它在文档（网页）加载完成后触发，从而使我们有机会在文档完全加载后执行一些操作。

用法

在 HTML 中，可以给任何元素添加 onload 事件处理器，以便在文档加载后执行特定的 Javascript 代码。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body onload="myFunction()">
    <h1>Welcome to my page</h1>
    <p>Here you will find some cool stuff.</p>
  </body>
  <script>
    function myFunction() {
      alert('Page loaded!');
    }
  </script>
</html>

在上面的代码中，我们使用 onload 将 myFunction() 函数绑定到页面的 <body> 元素上。当页面加载完毕后，myFunction() 函数就会被执行，从而弹出一个提示框告诉我们页面已经加载完成。

onload vs. DOMContentLoaded

需要注意的是，onload 事件处理器是在整个文档（包括所有图片、样式表、脚本等）都加载完成后才会触发。对于大型的网页来说，这可能需要数秒钟甚至更长的时间。如果您只需在 DOM 加载完成后执行一些操作，可以使用 DOMContentLoaded 事件处理器，它会在 DOM 加载后尽快触发。示例代码如下：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    alert('DOM loaded!');
  });
</script>
总结
  • onload 在文档（网页）完全加载后触发。
  • onload 适用于需要考虑整个文档加载完成后才能执行的操作。
  • DOMContentLoaded 在 DOM 加载完成后即刻触发。
  • DOMContentLoaded 适用于只需在 DOM 加载完成后执行的操作。