文档 readyState 完成时如何触发事件答案

【问题标题】：how do i fire an event when document readyState is complete文档 readyState 完成时如何触发事件
【发布时间】：2011-08-23 12:32:18
【问题描述】：

我想在 DOM 完全加载时触发和事件。我检查了document.readyState，但这不是一个事件。我想在readyState 完成时触发它。我该怎么做？

【问题讨论】：

标签： javascript

【解决方案1】：

取自另一篇文章，但是，您可以这样做：

var alreadyrunflag = 0; //flag to indicate whether target function has already been run

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", function() {
    alreadyrunflag = 1;
    // perform what you need to
  }, false);
} else if (document.all && !window.opera) {
  var contentloadtag = document.getElementById("contentloadtag");
  contentloadtag.onreadystatechange = function() {
    if (this.readyState == "complete") {
      alreadyrunflag = 1;
      // perform what you need to
    }
  }
}
//fallback
window.onload = function() {
  setTimeout(function() {
    if (!alreadyrunflag) {
      // perform what you need to
    }
  }, 0);
}

这会检查 DOM 是否已完全加载，但是，如果不是，它会回退到 onload。不过，您显然可以操纵它。

另外，如果 JQuery 是一个选项，您只需使用一个简单的函数即可达到相同的效果：

$(document).ready(function() {
  // Handler for .ready() called.
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

对于任何已经在使用 jQuery 库的人来说，ready 函数可以用来处理这个问题。

否则@Neal 的解决方案将实现相同的功能，而无需添加额外的依赖项。

【讨论】：

为什么建议将 jquery 添加到甚至可能不需要它的地方？
考虑为 jquery 添加一个替代建议，因为这是在过去 5 年中已经看到数千次的答案。
在撰写本文时，jQuery 已被广泛使用，并且在可能的情况下是一个合适的解决方案。我已添加您的解决方案 @Neal 作为替代方案以避免额外的依赖。

【解决方案3】：

处理window.load event。

只有在所有外部资源（包括图片）都加载完毕后才会触发。

【讨论】：

【解决方案4】：

一些简单的谷歌搜索将我指向这段代码：

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

还有this link

【讨论】：

它至少不会在 Opera Developer 上触发，只有 window.onload 会触发。