JavaScript原生判断DOM加载完毕的三种方式：readyState、DOMContentLoaded与onload

document.readyState属性详解

readyState

通过document.readyState属性可以获取当前文档的加载状态，该属性包含以下几种可能的值：

• uninitialized：文档尚未开始加载。
• loading：文档正在加载中。
• interactive：文档已加载完毕，用户可与文档进行交互。
• complete：文档已完全加载。

DOMContentLoaded与onload事件对比

DOMContentLoaded

当触发DOMContentLoaded事件时，表示DOM树已经构建完成，但此时不包括样式表、图片以及Flash等外部资源。

onload

当触发onload事件时，表示页面上所有的DOM元素、样式表、脚本文件、图片以及Flash等所有资源均已加载完成。

基于readyState的DOM加载检测实现

可以根据执行时DOM是否已经装载完毕，来决定是对回调函数进行同步调用还是异步调用。具体实现代码如下：

function onReady(fn){
  var readyState = document.readyState;
  if(readyState === 'interactive' || readyState === 'complete') {
  fn()
 }else{
   window.addEventListener("DOMContentLoaded",fn);
  }

}

onReady(function(){
 console.log('DOM fully loaded and parsed ');
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。