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. [Mysql]MySQL 服务无法启动。

    摘要 在官网下载了mysql,版本mysql-5.7.17-winx64,免安装的压缩包,解压后.放在MySql的文件夹中.电脑系统win10 x64. 配置文件 # For advice on ho ...

  2. leetcode第一刷_Gray Code

    说到格雷码,应该没人不知道,详细它有什么用,我还真不是非常清楚,我室友应该是专家.生成的规律不是非常明显,之前看到帖子讲的,这会儿找找不到了.. 思想是这种,假设有n位,在第2^(n-1)个编码以下画 ...

  3. ActiveX控件开发

    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程 开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是 ...

  4. java.lang.UnsatisfiedLinkError：no dll in java.library.path终极解决之道

     Java调用Dll时,会出现no dll in java.library.path异常,在Java Project中不常见,因为只要将Dll拷贝到system32目录下即可:         但若是 ...

  5. Java：java+内存分配及变量存储位置的区别

    Java内存区分 Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分 ...

  6. 用过Retina视网膜屏幕的笔记本电脑的后果

    用过Retina视网膜屏幕的笔记本电脑的后果是过程中感觉很不错,但是结果是普通屏幕再也看不上眼了.发现了原来看的好好的屏幕多出了许多的像素点,没办法,火眼金睛了.

  7. Informatica 常用组件Lookup之四 查找组件

    在映射中配置查找转换时,请定义以下组件: 查找源 端口 属性 条件 元数据扩展 查找源         您可以使用平面文件或关系表作为查找源.创建查找转换时,您可以从以下位置导入查找源: 资料库中的任 ...

  8. Android组件之BroadCast简单实践

    作为Android的四大组件之一,没有理由不介绍一下BroadCast,BroadCast中文简单翻译就是广播,前阵子浙江某大学的啦啦操,广场舞的大妈,其中大妈和学生从喇叭和音响上听到的声音就是事件源 ...

  9. 11个JavaScript颜色选择器插件

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  10. Transform开发cube模型权限处理之不同用户数据的过滤

    ========================此文不再详细的说transform的开发过程====================================================== ...