如何判断js 加载完成-js教程-PHP中文网

如何判断js 加载完成

月夜之吻

发布： 2024-11-08 06:10:03

原创

1240人浏览过

判断 JavaScript 加载完成的方法有：监听 DOMContentLoaded 事件，推荐使用，最可靠监听 window.onload 事件，准确性较低，适用于页面所有加载完成轮询方法，适用于无法使用事件监听器的情况使用 Promise，处理异步 JavaScript 加载

如何判断js 加载完成

如何判断 JavaScript 加载完成

在 Web 开发中，判断 JavaScript 加载完成对于确保应用程序正确运行至关重要。有几种方法可以实现这一点：

1. 监听 DOMContentLoaded 事件

当 DOM（文档对象模型）加载完成时，触发 DOMContentLoaded 事件。这是判断 JavaScript 加载完成的最可靠方法。

<code class="js">document.addEventListener("DOMContentLoaded", function() {
  // JavaScript 已加载完成
});</code>

登录后复制

2. 监听 window.onload 事件

window.onload 事件在页面加载完成时触发，包括图像、脚本和样式表。然而，它不如 DOMContentLoaded 事件准确，因为脚本可能会在页面加载后异步加载。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

<code class="js">window.onload = function() {
  // JavaScript 已加载完成
};</code>

登录后复制

3. 轮询方法

在某些情况下，可能无法使用事件监听器。在这种情况下，可以使用轮询方法来不断检查脚本是否已加载。

<code class="js">var interval = setInterval(function() {
  if (window.scriptLoaded) {
    // JavaScript 已加载完成
    clearInterval(interval);
  }
}, 100);</code>

登录后复制

4. 使用 Promise

可以使用 Promise 来处理异步 JavaScript 加载。当脚本加载完成时，Promise 将解析。

<code class="js">const scriptPromise = new Promise(function(resolve) {
  document.addEventListener("DOMContentLoaded", function() {
    resolve();
  });
});

scriptPromise.then(function() {
  // JavaScript 已加载完成
});</code>

登录后复制

最佳实践