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