如何知道文档是否已加载

How to know if document has loaded

本文关键字：加载 是否 文档 何知道      更新时间：2023-09-26

我有一段JS代码需要确定如果DOM已经加载。我知道有几种方法执行JS代码时，DOM已经加载，如:

$(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: Update (Post Answer Accept)我碰巧看到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();
    }
    ...

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

你可以这样写

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

检查ready和complete状态。

ready只存在很短的时间，但当DOM准备好时确实反映。然而，当页面完全加载时，状态变为"完成"。如果您碰巧只检查ready，则函数将失败，因此我们也检查此状态。

这个怎么样?

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
}
相关文章：