V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
hm20062006ok
V2EX  ›  JavaScript

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

  •  
  •   hm20062006ok · 2021-05-17 20:31:21 +08:00 · 1526 次点击
    这是一个创建于 1287 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    6 条回复    2021-05-20 13:42:07 +08:00
    DOLLOR
        1
    DOLLOR  
       2021-05-17 20:34:57 +08:00   ❤️ 1
    hm20062006ok
        2
    hm20062006ok  
    OP
       2021-05-17 21:00:19 +08:00
    @DOLLOR 好的。 但我还是好奇它在什么情况下会是 complete
    xiaopc
        3
    xiaopc  
       2021-05-17 21:10:58 +08:00 via Android
    HTML 被全部加载并且解析为 DOM 后就触发 DOMContentLoaded ; readyState 有三种状态,在子资源全部加载完成后才是 complete 。

    MDN 一查就有解释
    hm20062006ok
        4
    hm20062006ok  
    OP
       2021-05-17 23:47:44 +08:00
    @xiaopc 为了“子资源全部加载完成”, 我放了一张大图片。如下代码,可是还是没有监听到 complete?

    https://gist.github.com/hm20062006ok/80fad49a847d83461eeaa2656ddae29e
    xiaopc
        5
    xiaopc  
       2021-05-18 13:58:43 +08:00 via Android
    ......
    你这段代码监听的是 DOMContentLoaded,那时候当然没加载完成啊。要按 #1 说的监听 readystatechange 事件。
    jokerai
        6
    jokerai  
       2021-05-20 13:42:07 +08:00
    DOM 解析生命周期
    异步脚本、延迟脚本与 DOMContentLoaded 的关系
    https://www.cnblogs.com/Bonnie3449/p/8419609.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5724 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 03:44 · PVG 11:44 · LAX 19:44 · JFK 22:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.