如何确定文档是否已加载

Question

我有一段需要判断DOM是否已加载的JS代码。我知道有几种在DOM加载完成后执行JS代码的方法，例如：

$(document).ready(function() { ... }); // Jquery version

document.body.onload = function() { ... } // Vanila JS way

我正在寻找一些类似于以下方法的方式：

function isDOMLoaded() {
    // Do something to check if DOM is loaded or not
    // return true/false depending upon logic
}

PS: 更新（帖子回答接受） 我碰巧看到jquery也使用相同的方法检查DOM是否已加载。请看这里实现jquery.ready()的代码

bindReady: function() {
    if ( readyBound ) {
        return;
    }

    readyBound = true;

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        return jQuery.ready();
    }

    ...

- Sachin Jain

---

可能您可以在 DOM 加载时设置一个标志，然后检查该标志以查看 DOM 是否已加载。 - Arun P Johny

实际上，我的JavaScript代码是在运行时进入页面的，所以我无法在document.ready上绑定事件。我只需要检查一些布尔变量之类的东西，Yeahman已经回答了。 - Sachin Jain

Answer 1

function isDOMLoaded(){
 return document.readyState == 'complete';
}

- yeahman

Answer 2

您可以使用类似以下的内容

function isLoaded() {
    return (document.readyState === 'ready' ||
            document.readyState === 'complete')
}

检查 ready 和 complete 状态。

ready 只存在于短暂的时刻，但反映了DOM何时准备就绪。然而，当页面完全加载时，状态会更改为“complete”。如果您只检查 ready，函数将失败，因此我们还要检查这个状态。

- user1693593

Answer 3

这个怎么样？

var flgDOMLoaded=false; //Set a global variable
 $(document).ready(function() { 
   flgDOMLoaded= true;
  // Some code
 });

function isDOMLoaded() {
   return flgDOMLoaded; // return it. 
  //You don't need this function at all. You could just access window.flgDOMLoaded
}

- PSL