jQuery 检查文档是否已加载 - JavaScript

在编写 JavaScript 代码时，经常需要等待文档加载完成再执行一些操作，否则可能会出现一些意想不到的错误。在 jQuery 中，可以使用 $(document).ready() 或 $(function()) 来检查文档是否已经完全加载。

使用 $(document).ready()

$(document).ready() 在文档完全加载后执行一些 JavaScript 代码。使用方法如下：

$(document).ready(function() {
  // 在此处添加代码
});

或者使用简化版的方式：

$(function() {
  // 在此处添加代码
});

当文档已经加载完成时，上述代码会立即执行其中的函数。如果文档还未加载完成，则该函数会等待文档加载完成后再执行。

检查文档是否已经完全加载

如果需要在不同的时间点检查文档是否已经完全加载，可以使用 jQuery 的 $(document).readyState 属性来实现。该属性有 3 个可能的值：

• "loading"：文档还在加载中。
• "interactive"：文档已经加载了 HTML，但还在解析 HTML 中遇到的脚本。
• "complete"：文档已经完全加载，包括所有的图像、样式表和脚本等资源。

下面是一个示例代码，演示如何使用 $(document).readyState 检查文档加载状态：

if (document.readyState !== 'loading') {
  // 文档已经完全加载，可以在此处添加代码
} else {
  // 文档正在加载中
  document.addEventListener('DOMContentLoaded', function () {
    // 文档已经完全加载，可以在此处添加代码
  });
}

结论

使用 jQuery 的 $(document).ready() 和 $(document).readyState 可以在不同的时间点检查文档是否已经完全加载，并执行相应的操作。这一点非常重要，尤其是在编写需要操作 DOM 元素或获取某些元素的 JavaScript 代码时。