📌  相关文章
📜  在 JavaScript 中加载页面时如何运行函数？(1)

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

在 JavaScript 中，有多种方法可以在页面加载时运行函数。以下是一些常见的方法：

1. 将函数绑定到 onload 事件

可以通过将函数绑定到 window 对象的 onload 事件来在页面加载完成时执行函数。这个方法是最传统的一种方法，也是跨浏览器兼容性最好的方法。

window.onload = function() {
  // 在此处编写函数代码
};
2. 使用 addEventListener()

可以使用 addEventListener() 方法将函数添加到 window 对象的 load 事件上。这种方法也是跨浏览器兼容性较好的方法，同时也可以添加多个数据处理程序。

window.addEventListener("load", function() {
  // 在此处编写函数代码
});
3. 将函数放置在 的底部

在 HTML 文档中，可以将 JavaScript 函数代码放置在 标签的底部，以保证它在页面的所有元素都已加载完毕后再执行。

<!DOCTYPE html>
<html>
  <head>
    <title>我的页面</title>
  </head>
  <body>
    <!-- 页面内容 -->
    <script>
      // 在此处编写函数代码
    </script>
  </body>
</html>
4. 在 中使用 defer 或 async 属性

可以在 标签中使用 defer 或 async 属性，让浏览器在加载页面时异步加载脚本，以避免脚本阻塞页面加载。

<!DOCTYPE html>
<html>
  <head>
    <title>我的页面</title>
    <script defer src="my-script.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

其中，defer 属性表示浏览器在加载页面时异步下载脚本，但会按照它们在 中出现的顺序依次执行；而 async 属性则表示浏览器在下载脚本时不会等待它，而是在下载完毕后立即执行。

总结：以上是在 JavaScript 中加载页面时如何运行函数的常见方法。具体应该根据项目需求和浏览器兼容性来选择具体的方法。