JavaScript document.ready() 的用法

使用 JavaScript 和文档对象模型(DOM)时,你可能希望脚本仅在 DOM 加载后运行。

你可以使用 jQuery 中的 $(document).ready() 方法或原生 JavaScript 中的 DOMContentLoaded 事件来执行此操作。

在本文中,你将学习如何使用 jQuery 和 vanilla JavaScript 使 JavaScript 代码仅在加载 DOM 时运行。

如何在 jQuery 中使用 $(document).ready() 方法

在 JavaScript 在浏览器中运行之前,它会等待文档内容的加载。这包括样式表、图像等。

按照惯例,将 script 元素放在结束 body 标记之前会使脚本在运行之前等待文档的其余部分加载。

我们还可以通过使用 $(document).ready() 方法在 jQuery 中加快这个过程。

$(document).ready() 方法只等待 DOM 加载,它不等待样式表、图像和 iframe。

这是一个例子:

$(document).ready(function () {
  console.log("Hello World!");
});

在上面的代码中,$(document).ready() 方法只会在 DOM 加载后运行,所以你只有在 $(document).ready() 方法开始运行后才能在控制台中看到 “Hello World!”。

总之,你可以在 $(document).ready() 方法中编写所有 jQuery 代码。这样,你的代码将在运行之前等待 DOM 加载。

如何在 JavaScript 中使用 DOMContentLoaded 事件

就像 jQuery 的 $(document).ready() 方法一样,DOMContentLoaded 事件在 DOM 加载后触发——它不会等待样式表和图像。

以下是如何使用 DOMContentLoaded 事件:

document.addEventListener("DOMContentLoaded", () => {
  console.log("Hello World!");
});

一旦 DOM 加载完毕,DOMContentLoaded 事件就会检测到它并运行。

在以下情况下,你应该使用 DOMContentLoaded 事件:

  • 你的网页中有某些功能应该立即触发,而无需等待页面内容的其余部分
  • 你在 head 元素中放置了一个脚本标签

小结

在本文中,我们讨论了 jQuery 中的 $(document).ready() 方法,以及 vanilla JavaScript 中的 DOMContentLoaded 事件。

我们使用它们在 DOM 加载后执行 JavaScript 代码。

这些功能的有趣之处在于,它们可以让 JavaScript 代码运行,而无需等待图像和样式表完全加载到网页中。