window.onload 和 document.onDOMCo
2018-10-08 本文已影响0人
XuZiYa
1.load
当一个资源及其依赖资源已完成加载时，将触发load事件。
一个HTML页面，当DOM构建完成之后，只有当其它的需要加载的资源，例如图片，样式表等全部加载完成，才会触发load事件。
2.DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
例子
<body>
<img src="https://www.baidu.com/img/dong_30688b45cdf667c7634a2a5ca98c3862.gif" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('DOMContentLoaded',function(){
console.log('document'+' '+img.width);
});
window.onload = function(){
console.log('window'+' '+img.width);
};
</script>
打开HTML页面， 控制台输出如下：
可以看到第一个输出的是0，第二个输出的是540，图片的宽度是540px；
即DOM构建完成，图片还未加载完成，触发DOMContentLoaded事件；
图片加载完成后，触发load事件。
