本文详解JavaScript中判断DOM加载完成的三种原生方式。通过解析document.readyState的五种状态（uninitialized至complete），对比DOMContentLoaded与onload事件的触发时机差异，并提供基于readyState的同步或异步回调执行代码，帮助开发者根据实际需求选择最优方案。
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 ');
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。