码迷,mamicode.com
首页 > 其他好文 > 详细

事件DOMContentLoaded和load的区别

时间:2017-06-23 18:14:44      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:区别   read   文档加载   lis   func   兼容   www   html   文件   

他们的区别是,触发的时机不一样,先触发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);

用jQuery这么写

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

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

 

事件DOMContentLoaded和load的区别

标签:区别   read   文档加载   lis   func   兼容   www   html   文件   

原文地址:http://www.cnblogs.com/cnundefined/p/7070977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!