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(){

        console.log("window is onload");

    }

    document.onreadystatechange = function(){

        if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入

          console.log('document is onload');

        }

        if(document.readyState == "interactive"){ //DOM构建了就会执行，先与complete执行

          console.log('document is interactive ,so DOM obj is '+ document.getElementById('img1'));

        } 

    };

</script>

</head>

<body onload="console.log('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.ready、window.onload、body.onload的区别的更多相关文章

  1. $(document).ready,$(window).load,window.onload区别和联系

    $(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...

  2. javascript jquery document.ready window.onload

    网易 博客 下载LOFTER客户端 注册登录  加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我     日志       关于我 Holy ...

  3. $(document).ready() $(window).load 及js的window.onload

    1.$(document).ready()  简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load  在有时候确实我们有需 ...

  4. $( document ).ready()&$(window).load()

    $( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...

  5. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

  6. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  7. 转载 jquery $(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  8. [转]jquery $(document).ready() 与window.onload的区别

    http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...

  9. window.onload 和 $(document).ready(function(){})的区别

    这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...

  10. $(document).ready()与window.onload的区别，站在三个维度回答问题

    1.执行时机 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...

随机推荐

  1. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  2. KJBitmap使用方法

    摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/03/25/01 摘要 好像最近一个月都没有写博客了,正好伴着KJFrameForAndroid 更新v2.14版 ...

  3. python接口自动化26-参数关联和JSESSIONID(上个接口返回数据作为下个接口请求参数)

    前言 参数关联是接口测试和性能测试最为重要的一个步骤,很多接口的请求参数是动态的,并且需要从上一个接口的返回值里面取出来,一般只能用一次就失效了. 最常见的案例就是网站的登录案例,很多网站的登录并不仅 ...

  4. Objective-C中的hasPrefix

    Objective-C中的hasPrefix hasPrefix:方法的功能是判断创建的字符串内容是否以某个字符开始,其语法形式如下: -(BOOL)hasPrefix:(NSString*)aStr ...

  5. @Java类加载的过程

    前言 我们写的源程序.java文件经过编译后成为了.class字节码文件,.class文件中描述了类的各种信息,最终都需要加载到虚拟机(JVM)之后才能运行和使用.而虚拟机如何加载这些.class文件 ...

  6. [3] 球(Sphere)图形的生成算法

    顶点数据的生成 bool YfBuildSphereVertices ( Yreal radius, Yuint slices, Yuint stacks, YeOriginPose originPo ...

  7. fdisk 分区格式化为ext4格式分区

    第一步:添加硬盘/新建分区(fdisk) 第二步:格式化分区(mkfs.ext4) 第三步:加载分区(mount) 1.第一步:添加硬盘/新建分区(fdisk) a.查看当前系统所有硬盘及分区情况:f ...

  8. [转贴] 数字证书及 CA 的扫盲介绍

    [略有删节] 为了达到普及的效果,俺会尽量用比较浅显,非技术的语言来讲清楚. ★先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿.   ◇普通的介绍信 想必大伙 ...

  9. 五个瓶颈影响你的Asp.Net程序(网站)性能

    在今天的手机设备世界里,生活的节奏继续加快,因此访问你的网站的用户的耐心也在渐渐失去.同时,我提供了非常多的特性,为了防止你的网站变得过时或者廉价,你必须跟上竞争对手.你想赢得访问者的喝彩,但访问者没 ...

  10. scala 学习笔记十 元组

    1.元组初始化 2.元组作为函数返回值 3.元组拆包 上面168行 ,单个val后面跟着一个由五个标识符构成的元组,表示对ff返回的元组进行拆包 上面174行,将整个元组捕获到单个val或var中,那 ...