DOMContentLoaded事件/Load事件的区别?
2016-11-24 本文已影响390人
开车去环游世界
DOMContentLoaded事件,页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,它在两个地方都有体现:概览视窗的蓝色竖线,总览视窗的触发时间。
Load事件,当所有资源加载完成后触发的,它在三个地方有体现:概览视窗的红色竖线,请求列表视窗的红色竖线,总览视窗的触发时间。
DOMContentLoaded/Load事件
结合DOM文档加载的加载步骤,DOMContentLoaded事件/Load事件,触发时机如下:
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() {
// ...代码...
});