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. SQLite 管理工具 SQLite Expert

    SQLite Expert – Personal Edition SQLite Expert 提供两个版本,分别是个人版和专业版.其中个人版是免费的,提供了大多数基本的管理功能. SQLite Exp ...

  2. 爱普生Me330 打印机改装连供系统计划

    Me330想改装连供得大家可以看一下,本文是我的亲生经历,现分享给大家,希望能给你们提供帮助,如果有不懂的地方可以联系我Email:  事先说明,我不买连供,也不卖这款机子,购买的话,请不要打扰我!& ...

  3. android中反射机制

    本文介绍Android反射机制实现与原理,在介绍之前,要和Java进行比较,所以先看下Java中的反射相关知识: 一.反射的概念及在Java中的类反射 反射主要是指程序可以访问.检测和修改它本身状态或 ...

  4. arcgis10.5新功能图形缓冲

    摘要 在输入要素周围某一指定距离内创建缓冲区多边形.在要素周围生成缓冲区时,大部分制图形状对缓冲区末端(端头)和拐角(连接)可用. 插图  

  5. QT vs x64编译

    下载qt-everywhere-opensource-src-5.3.0 这个设置非常重要,不对的话,一大堆编译错误,已经折腾了好多回了 configure -mp -confirm-license ...

  6. 完全理解Gson（1）：简单入门

    GSON是Google开发的Java API,用于转换Java对象和Json对象.本文讨论并提供了使用API的简单代码示例.更多关于GSON的API可以访问:http://sites.google.c ...

  7. JTS(Geometry)（转）

    原文链接:http://blog.csdn.net/cdl2008sky/article/details/7268577 空间数据模型(1).JTS Geometry model (2).ISO Ge ...

  8. spark读取 kafka nginx网站日志消息 并写入HDFS中（转）

    原文链接:spark读取 kafka nginx网站日志消息 并写入HDFS中 spark 版本为1.0 kafka 版本为0.8 首先来看看kafka的架构图 详细了解请参考官方 我这边有三台机器用 ...

  9. 第一章 Java常用集合类总览

    1.Java最常用的集合类 Collection接口 List接口(允许有重复元素):ArrayList.LinkedList.Vector.Stack Set接口(不允许有重复元素,可用于去重操作) ...

  10. 6个原则、50条秘技提高HTML5应用及网站性能

    Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为“提高HTML5应用和网站性能的50条秘技(50 performance ...