document.ready2022-12-08 只读属性，返回document的加载状态，有三个可能的值 loadin

2022-12-08

只读属性，返回document的加载状态，有三个可能的值

document.readystate = 'loading'

document.readystate 变成 interactive

DOMContentLoaded 事件触发

document.readystate 变成 complete

load事件触发

可通过readystatechange事件监听document 加载状态

document.addEventListener('readystatechange', () => console.log(document.readyState))

带async 的脚本在加载完后会立即执行，如果想要保证它在DOMContentLoaded之后执行，可能最开始会想到会在脚本中用这种写法

document.addEventListener('DOMContentLoaded',() => {
//代码主体
})

但是异步脚本也可能会在DOMContentLoaded 事件结束后也就是readyState 为complete 阶段才下载完，此时添加的DOMContentLoaded事件已经不会触发，所以此脚本将不再执行

readyState可用于解决这种问题，代码如下

if(document.readyState != 'loading'){
    //code here
}else{
    widnow.addEventListener("DOMContentLoaded", function(){
        //code here
    })
}

window 指窗体。 window 对象表示浏览器中打开的窗口 document指页面。document 是window 的一个子对象，一个对象属性 document对象：代表整个HTML文档，可以用来访问页面中所有的元素

document.ready