📌  相关文章
📜  如何告诉 javascript 等到网站加载到 html - Javascript (1)

📅  最后修改于: 2023-12-03 14:52:11.773000             🧑  作者: Mango

如何告诉 JavaScript 等到网站加载到 HTML - JavaScript

当我们开发网站时，有时候需要确保 JavaScript 代码只在页面完全加载完毕后执行，这样可以避免因为 DOM 未完全加载导致的错误。在本文中，我们将介绍几种不同的方法来告诉 JavaScript 等到网站加载到 HTML。

1. 使用 window.onload 事件

window.onload 事件在整个页面（包括 DOM、样式、图片等）加载完成后触发，这是最常见的等待 HTML 加载的方法之一。

window.onload = function() {
  // 在此处放置需要等待 HTML 加载完成后执行的 JavaScript 代码
};

请注意，如果同时使用了多个 window.onload，只有最后一个会被执行。

2. 使用 document.ready 事件

document.ready 事件是 jQuery 提供的一种等待 HTML 加载的方法。它在 DOM 加载完成时触发，与图片加载无关。

$(document).ready(function() {
  // 在此处放置需要等待 HTML 加载完成后执行的 JavaScript 代码
});

document.ready 方法也可以使用简写形式：

$(function() {
  // 在此处放置需要等待 HTML 加载完成后执行的 JavaScript 代码
});
3. 放置脚本标签于 HTML 末尾

将 JavaScript 代码直接放置在 HTML 文件的末尾也能确保它们在 HTML 加载完成后执行。这是因为浏览器会按照顺序解析 HTML 文件，并且在遇到脚本标签时会立即执行其中的代码。

<!DOCTYPE html>
<html>
  <head>
    <!-- head 部分的内容 -->
  </head>
  <body>
    <!-- 页面主体内容 -->

    <script>
      // 在此处放置需要等待 HTML 加载完成后执行的 JavaScript 代码
    </script>
  </body>
</html>
4. 使用 defer 属性

在使用 <script> 标签引入 JavaScript 文件时，可以使用 defer 属性告诉浏览器在 HTML 解析完成后才执行该脚本。这样，无论脚本标签的位置在哪里，都能确保它们在文档完全加载后执行。

<!DOCTYPE html>
<html>
  <head>
    <!-- head 部分的内容 -->

    <script defer src="path/to/your/script.js"></script>
  </head>
  <body>
    <!-- 页面主体内容 -->
  </body>
</html>

请注意，与 defer 不同，async 属性确保脚本与其他页面操作并行执行，并且不会等待 HTML 加载完成。因此，如果需要确保脚本与页面完全加载后执行，应该使用 defer 而不是 async。

以上是几种常见的方式来告诉 JavaScript 在网站加载到 HTML 完全完成后执行。每种方法都有其适用的场景，请根据实际的需求来选择合适的方式。