document.ready和window.onload的区别

document.ready和window.onload的区别

milletmi关注

2018.12.21 14:01:18字数 207阅读 2,717

页面加载完成有两种事件

一、document.ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

//jquery的写法
$(function(){ 
      // do something 
});

二、window.onload，指示页面包含图片等文件在内的所有元素都加载完成。
必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

window.onload=function(){
      //do something
}
//或者经常用到的图片
document.getElementById("imgID").onload=function(){
     //do something
}