window.onload 和 DOMContentLoaded 的区别

区别

• window.onload 资源全部加载完成才能执行，包括图片
• DOMContentLoaded DOM 渲染完成即可，图片可能尚未下载

代码演示:

准备一段 html 代码

<p>window.onload 和 DOMContentLoaded 的区别</p>
<img id="img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

来，测试下

document.getElementById('img').onload = function () {
  console.log('img loaded');
};
window.addEventListener('load', function () {
  console.log('window laoded');
});
window.addEventListener('DOMContentLoaded', function () {
  console.log('dom content laoded');
});
// 一般正常结果
//  dom content laoded
// img loaded
// window laoded