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

By | 06月19日
Advertisement

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。

Similar Posts:

  • javascript jquery document.ready window.onload

    网易 博客 下载LOFTER客户端 注册登录 加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我 日志 关于我 Holyson 闻道有先后,术业有专攻 加博友 关注他 文章分类 ·css(2) ·.net控件事件(3) ·帐号密码(0) ·JS与JQ(12) ·sql server指南(5) ·杂谈(2) ·C#基础指南(18) ·.net成长篇(38) ·更多 > LOFTER精选 注册免费冲印20张照片 > 网易新闻 清华毕业学姐被

  • 【整】jquery $(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).

  • jquery 中 $(document).ready() 与window.onload 的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 注视:除非通过对onlo

  • 那些被漏掉的JQuery总结(一)——Window.Onload和document.ready的对比(补充Page_load)

    引言: 本次项目中要实现一个前台效果.当我将代码提交更新后,始终实现不了我要的效果.调试了,也咩有发现问题,代码是及其简单的,而且代码是没有错误的.于是开始怀疑是没有获取到页面元素.最终找到真相!是自己没有搞清楚,Window.onLoad和document.ready的区别.现在拿出来和大家一起分享下. 1.执行事件 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写的

  • $(document).ready和window.onload的区别

    < > 猎头职位: 上海: Junior Product Manager 相关文章: DOM加载与文档资源加载 jquery1.43源码分析之工具方法 可以在某些场合替代onload事件的domReady事件 推荐群组: D语言 更多相关推荐 window.onload $(document).ready 一.window.onload 当一个文档完全下载到浏览器中时,会触发 window.onload 事件.这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写

  • [转]jQuery $(document).ready()与window.onload的区别

    [转自]http://www.ljf.cn/2010/1/Item191451.html 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二 是onload,指示页面包含图片等文件在内的所有元素都加载完成. 真不知道这个标题该怎么取,暂时就先凑活着用了. 用jQ的人很多人都是这么开始写脚本的: $(function(){ // do something }); 其实这个就是jq ready()的简写,他等价于: $(document).ready(

  • $(window).load(function() {}),$(document).ready(function(){}),body.Onload()的区别

    写js和jquery是,我们一般会要用到页面一加载就需要运行某个程序的时候.这个时候我们就要区分 $(window).load(function() {}),$(document).ready(function(){}),body.Onload()各代表什么意思. 首先$(window).load(function() {})和body.Onload(),它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点. 不用body.Onloa

  • jquery (js中window.onload与jquery中$(document.ready())的区别)

    jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张大容量图片) Java代码 <html> <head> <script type='text/javascript' src='jquery-1.3.2.min.js'></script> <script type='text/javascript'>

  • window.onload()和$(document).ready()区别

    执行时间: window.onload:必须等待网页中所有的内容加载完毕后(包括图片)才能执行; $(document).ready();网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完. 编写个数: 1 window.onload=function(){alert(0);} 2 window.onload=function(){alert(1);} 结果只会输出1; 1 $(document).ready(function(){alert(0)}); 2 $(docu

  • jquery $(document).ready和window.onload区别

    window.onload 必须等到页面内包括图片在内的所有元素加载完毕后执行 不能同时编写多个,如果有window.onload方法,只会执行一个 没有简化写法 $(document).ready dom结构绘制完毕后加载 可以同时编写多个,并且每个都能执行 $(document).ready(function(){}); 可以简写为$(function(){}); 开发中,一般第一个行都是$(document).ready(function(){........}): 这个时候不一定要等所有

Tags: