document DOMContentloaded和document load

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了document DOMContentloaded和document load相关的知识,希望对你有一定的参考价值。

他们的区别是,触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件。

DOM文档加载的步骤为

  1. 解析html结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
用原生js可以这么写

// 不兼容老的浏览器,兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253),或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);

 

以上是关于document DOMContentloaded和document load的主要内容,如果未能解决你的问题,请参考以下文章

DOMContentLoaded

jquery的isReady方法(DOM是否加载完)

关于页面加载

load 与 DOMContentLoaded 之间的区别 [重复]

window.onload 与 document.onload

window.onload 与 document.onload