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. java基础学习总结——多态(动态绑定)

    一.面向对象最核心的机制——动态绑定,也叫多态

  2. C#高性能大容量SOCKET并发(转)

    C#高性能大容量SOCKET并发(零):代码结构说明 C#高性能大容量SOCKET并发(一):IOCP完成端口例子介绍 C#高性能大容量SOCKET并发(二):SocketAsyncEventArgs ...

  3. 与Win8之磁盘活动时间100%斗争心得

    Windows8因人而异地会在使用过程中磁盘活动时间无缘无故提升到100%并且可能出现持续性抽风现象,具体表现为0%瞬间飙升至100%后又回落,或者一直保持在100%导致使用过程卡顿,认真阅读本文有助 ...

  4. MVC文件上传06-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义控制器上传多个文件

    当需要在控制器中处理除了文件的其他表单字段,执行控制器独有的业务逻辑......等等,这时候我们可以自定义控制器. MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证 ...

  5. Selenium2+python自动化46-js解决click失效问题

    前言 有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了. 本篇用2种方法解决这种诡异的点击事件失效问题 一.遇到的问 ...

  6. 测试 Nginx 作为前端下各种模式的性能

    测试环境: 1:Nginx 独立处理静态面页请求 5000,开了60个线程 2:Nginx作为前端请求转给 Weblogic 12c 处理 (Spring 4.0平台下的动态面页效果如图) 3:Ngi ...

  7. Spring事务处理探究

    开发环境: OS:windows XP       Web Server: jakarta-tomcat-5.0.28       DataBase Server: MS SQL Server 200 ...

  8. Android之开源中国客户端源码分析（二）

    1. 加载动画圈实现 <ProgressBar android:id="@+id/main_head_progress" style="@style/loading ...

  9. Spring Boot中application.yml与bootstrap.yml的区别（转）

    说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...

  10. 《阿里巴巴JAVA开发手册》里面写超过三张表禁止join这是为什么？

    分库分页.应用里做join 多表join性能很差 参考: 1.https://www.zhihu.com/question/56236190