document 的 DOMContentLoaded 事件什么时候 readyState === 'complete' ?

[hm20062006ok]

在文档最底部插入以下脚本：

document.addEventListener("DOMContentLoaded", function(event) { console.log(event.target.readyState); //这里的 readyState 一直是 'interactive' 吗？ }, false);

[DOLLOR]

你应该监听 readystatechange 事件。

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

[hm20062006ok]

@DOLLOR 好的。 但我还是好奇它在什么情况下会是 complete

[xiaopc]

HTML 被全部加载并且解析为 DOM 后就触发 DOMContentLoaded ； readyState 有三种状态，在子资源全部加载完成后才是 complete 。

MDN 一查就有解释

[hm20062006ok]

@xiaopc 为了“子资源全部加载完成”， 我放了一张大图片。如下代码，可是还是没有监听到 complete?

https://gist.github.com/hm20062006ok/80fad49a847d83461eeaa2656ddae29e

[xiaopc]

......
你这段代码监听的是 DOMContentLoaded，那时候当然没加载完成啊。要按 #1 说的监听 readystatechange 事件。

[jokerai]

DOM 解析生命周期
异步脚本、延迟脚本与 DOMContentLoaded 的关系
https://www.cnblogs.com/Bonnie3449/p/8419609.html