如果文档已加载 - JavaScript

在开发 Web 应用程序时，我们经常需要在 DOM 加载完毕后执行一些 JavaScript 代码。这是因为如果在 DOM 尚未完成加载之前执行 JavaScript 代码，可能会出现一些问题。因此，我们需要一种机制来确保文档已加载并准备好与 JavaScript 交互。

使用 window.onload 事件

最常用的方法是使用 window.onload 事件，在窗口中的所有资源（包括图片）都已加载时触发此事件。以下是使用 window.onload 事件的代码示例：

window.onload = function() {
  // 在这里放置你的 JavaScript 代码
};

在该代码示例中，我们将一些 JavaScript 代码放在了函数内部，该函数作为 window.onload 事件的处理程序。当文档加载完成时，该函数将自动执行。例如，我们可以使用以下代码在页面加载后弹出一个提示框：

window.onload = function() {
  alert("文档已加载！");
};

使用 document.ready 事件

jQuery 是最受欢迎的 JavaScript 库之一，它提供了一个称为 document.ready 的事件，在 DOM 加载完成后立即执行。以下是使用 document.ready 事件的代码示例：

$(document).ready(function() {
  // 在这里放置你的 JavaScript 代码
});

在该代码示例中，我们使用 $ 函数调用了 document.ready 事件的处理程序。当文档加载完成时，该函数将自动执行。

ES6 的解决方案

由于 window.onload 和 document.ready 的一些限制，许多开发人员更喜欢使用 ES6 中的 Promise 来确保文档已加载。以下是使用 Promise 的代码示例：

// 创建一个函数，返回一个 Promise 对象
function onDocumentReady() {
  return new Promise(function(resolve, reject) {
    if (document.readyState === "complete") {
      resolve();
    } else {
      document.addEventListener("DOMContentLoaded", function() {
        resolve();
      });
    }
  });
}

// 调用该函数并执行 JavaScript 代码
onDocumentReady().then(function() {
  // 在这里放置你的 JavaScript 代码
});

在该代码示例中，我们创建了一个名为 onDocumentReady 的函数，用于检查文档是否已加载完成。如果文档已加载完成，则 resolve 函数将被调用并返回一个 Promise 对象。否则，我们将侦听 DOMContentLoaded 事件，并在事件发生时调用 resolve 函数。

总结

无论使用哪种方法，确保在 DOM 完成加载之后执行 JavaScript 代码始终是非常重要的。这将有助于避免许多潜在的问题，并确保你的代码能够正常工作。在本文中，我们介绍了三种方法来确保文档已加载： window.onload、document.ready 和 ES6 中的 Promise。