• 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

标签: none

添加新评论