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事件。