文档就绪 JavaScript Vanilla

简介

当我们写 JavaScript 代码时，我们需要确保文档加载完毕后才能执行我们的 JavaScript 代码，这样我们就可以避免许多问题。在这个主题中，我们将学习如何在 JavaScript 中检测文档是否加载好并可以与代码进行交互。我们将使用纯 JavaScript，也就是我们所说的“JavaScript Vanilla”。

讨论

在 JavaScript Vanilla 中，我们有两种方法检测文档是否就绪：使用 window.onload 和 document.ready()。

window.onload

window.onload 事件在页面中的所有资源都被加载后才会被触发。它可以用来确保脚本在任何时候都会在文档就绪后执行。下面是一个使用 window.onload 的示例代码：

window.onload = function() {
  //执行JavaScript代码
};

document.ready()

document.ready() 已经成为了jQuery中的标准方法，它在文档就绪时调用一个回调函数。同样的效果可以使用原生JavaScript实现。下面是一个使用 document.ready() 的示例代码：

document.addEventListener('DOMContentLoaded', function() {
  //执行JavaScript代码
}, false);

小结

在本主题中，我们学习了如何使用 JavaScript Vanilla 检测文档是否就绪，并确保我们的代码在这个时候可以被执行。我们介绍了使用两种方法： window.onload 和 document.ready()，让您选择适合您代码的方法。无论您选择哪种方法，确保您的 JavaScript 代码在文档完全就绪后执行。