原文: JavaScript document.ready() – Document Ready JS and jQuery Example
使用 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 代码运行,而无需等待图像和样式表完全加载到网页中。
祝你编程愉快!