如何知道文档是否已加载答案

【问题标题】：How to know if document has loaded如何知道文档是否已加载
【发布时间】：2013-05-20 05:39:32
【问题描述】：

我有一段 JS 代码需要确定 DOM 是否已加载。我知道当 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 是否已加载。看看Implementation of jquery.ready() here

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();
    }

    ...

【问题讨论】：

也许你可以在 dom 加载时设置一个标志并检查该标志以查看 dom 是否已加载
实际上，我的 javascript 代码在运行时进入页面所以我无法在 document.ready 上绑定事件。我只需要检查Yeahman已经回答的一些布尔变量类型的东西。

标签： javascript dom load

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以使用这样的东西

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

检查ready 和complete 的状态。

ready 只存在一小段时间，但在 DOM 准备好时会反映。但是，当页面完全加载时，状态将更改为“完成”。如果您碰巧只检查准备就绪，则该功能将失败，因此我们也会检查此状态。

【讨论】：

【解决方案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
}

【讨论】：