事件DOMContentLoaded和load的区别

Noodles 发布于2019-08-20 15:31 / 1561人阅读

摘要：区别是触发的时机不一样，先触发事件，后触发事件。文档加载的步骤为解析结构。加载外部脚本和样式表文件。解析并执行脚本代码。在第步，触发事件。可参考用原生可以这么写不兼容老的浏览器，兼容写法见中与事件，或用代码代码用这么写代码代码

区别是:触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为

1,解析HTML结构。
2,DOM树构建完成。//DOMContentLoaded
3,加载外部脚本和样式表文件。
4,解析并执行脚本代码。
5,加载图片等外部文件。
6,页面加载完毕。//load
在第2步，会触发DOMContentLoaded事件。在第6步，触发load事件。

可参考
https://developer.mozilla.org...

用原生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() {
    // ...代码...
});

云服务器 GPU云服务器 load事件宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82305.html

DOMContentLoaded与load的区别

摘要：所以所需要的时间必然大于等于所需要的时间。页面的生命周期主要有三个重要的事件，已经构建好，可以对节点进行操作，所有资源加载完毕，可以对资源进行一系列操作，比如获取图片宽高等基本不会用到，当浏览器窗口关闭或者刷新时，会触发事件。 DOMContentLoaded与load的区别 showImg(https://segmentfault.com/img/remote/14600000192...

niuxiaowei111 2019-08-26 13:52 评论0 收藏0
页面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

lx1036 2019-08-01 17:44 评论0 收藏0
页面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

luckyyulin 2019-08-21 16:55 评论0 收藏0