您的位置：首页 > 其它

document.ready、window.onload、body.onload的区别

2014-06-19 15:41 411 查看
document的ready事件通常会比window的onload事件先发生，为什么呢？

因为document的ready是在浏览器加载解析并构建完doc文档模型时发生的，而window的onload是整个文档的内容加载完成时才会发生。

举个很简单的例子：

1个页面有几十张比较大的图片(img)，当网速慢的时候最能看出效果，访问这个页面浏览器就会先去构建doc模型，然后再去请求图片，在构建doc模型完成就会执行document的ready事件，而window的onload事件得要等所有图片加载完成才会执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{padding:0px;margin:0px;}

#main {margin:auto;padding:0;background: yellow;width:90%;}
#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto; height:50px;}
</style>
<script>
window.onload  = function(){
alert("window is onload");
}
document.onreadystatechange = function(){
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入
alert('document is onload');
}
if(document.readyState == "interactive"){ //DOM构建了就会执行，先与complete执行
alert('document is interactive ,so DOM obj is '+ document.getElementById('img1'));
}

};
</script>
</head>

<body onload="alert('body is onload')">
测试事件
<img src="http://pic5.bbzhi.com/qichebizhi/mingchegaoqingbizhijihe/mingchegaoqingbizhijihe_427614_11.jpg" id='img1'/><br/>
<img src="http://image15-c.poco.cn/mypoco/myphoto/20141226/23/6491218420141226234200099_640.jpg?1024x855_120" id='img2' />

</body>
</html>


运行结果：先document 后 window 再 body。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航