window onload和$(document).ready()及DOMContentLoaded的区别（DOM加载完毕前后调用）

最新推荐文章于 2022-12-27 10:12:49 发布

zkau0518

最新推荐文章于 2022-12-27 10:12:49 发布

阅读量344

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_39888214/article/details/117015958

版权

文章探讨了window.onload和$(document).ready()以及DOMContentLoaded事件的区别。DOMContentLoaded在DOM元素加载完成后触发，适用于DOM2级事件添加。window.onload则等待整个页面包括所有资源如图片加载完毕后才触发，确保所有元素可访问。在不同浏览器中，onload和onpageshow事件的行为可能有所不同，例如IE不支持onpageshow，而Chrome在页面返回时两者都会触发。

摘要由CSDN通过智能技术生成

页面加载过程：域名解析——加载html——加载js和css——加载图片

DOM元素加载完成之前调用

(function () {
    // 此方法会在DOM加载完成之前调用
})(jQuery)

$(document).ready(function() {
    // DOM元素加载之后做的事情
})

$(function () {
    // 此方法为jQuery DOM加载完成触发的事件
})

原生js，DOM加载完成执行的事件为DOMContentLoaded，不过此方法只能通过 DOM2 级方式添加，即采用addEventListener()/attachEvent() 方式添加才能够使用

document.addEventListener('DOMContentLoaded', function() {
     // 此方法为原生js DOM加载完成执行的事件
});

window.onload方法会在页面及所有图片加载完毕触发，window.onload = function() { }


window.onload=function(){
      // 此方法会在DOM加载完成事件之后 执行
}
 
//或者可以具体到某一个具体的DOM元素
document.getElementById("imgID").onload=function(){
     //do something
}

此时可以访问页面中的所有元素，当js文件引入写在body上面的时候，页面自上向下执行，js中的代码操作页面元素的时候，页面还没有渲染完成，所以无法