如何判断js 加载完成

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

如何判断 JavaScript 加载完成

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

1. 监听 DOMContentLoaded 事件

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

document.addEventListener("DOMContentLoaded", function() {
  // JavaScript 已加载完成
});

2. 监听 window.onload 事件

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

window.onload = function() {
  // JavaScript 已加载完成
};

3. 轮询方法

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

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

4. 使用 Promise

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

const scriptPromise = new Promise(function(resolve) {
  document.addEventListener("DOMContentLoaded", function() {
    resolve();
  });
});

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

最佳实践

• 根据应用程序需要选择最适合的方法。
• 尽量使用 DOMContentLoaded 事件，因为它是最准确的。
• 避免使用 window.onload 事件，因为它可能不太准确。
• 仅在必要时使用轮询方法。

以上就是如何判断js 加载完成的详细内容，更多请关注其它相关文章！