Fork me on GitHub

事件DOMContentLoaded和load的区别


她是你姑姑,又是你师父,怎么能做你妻子!

简述

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

DOM文档加载的步骤为:

  • 解析HTML结构。
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码。
  • DOM树构建完成。//DOMContentLoaded
  • 加载图片等外部文件。
  • 页面加载完毕。//load

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

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

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

用jQuery这么写:

1
2
3
4
5
6
7
8
9
// DOMContentLoaded
$(document).ready(function() {
// ...代码...
});

//load
$(document).load(function() {
// ...代码...
});

http://www.jianshu.com/p/d851db5f2f30

请我喝一个苹果味的美年达吧,谢谢!