document.ready、window.onload、body.onload的区别
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的区别的更多相关文章
- $(document).ready,$(window).load,window.onload区别和联系
$(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...
- javascript jquery document.ready window.onload
网易 博客 下载LOFTER客户端 注册登录 加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我 日志 关于我 Holy ...
- $(document).ready() $(window).load 及js的window.onload
1.$(document).ready() 简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load 在有时候确实我们有需 ...
- $( document ).ready()&$(window).load()
$( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- 转载 jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- [转]jquery $(document).ready() 与window.onload的区别
http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...
- window.onload 和 $(document).ready(function(){})的区别
这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...
- $(document).ready()与window.onload的区别，站在三个维度回答问题
1.执行时机 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...
随机推荐
- PyQt5 各种菜单实现
# -*- coding: utf-8 -*- # Created by PCITZDF on 2018/4/8 15:36. # FileName: menuandtools.py import s ...
- Cesium 坐标系转换
cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标).我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等 ...
- 用宏判断程序当前的运行模式（debug or release）
例子 #if defined (DEBUG) && DEBUG == 1 // 如果当前处于debug 模式 //to do #else //to do #endif
- 转 iOS 调试技巧
调度技巧一: 程序在崩溃的时候,xcode经常没有给出准确的堆栈信息,而是定位在了main方法里,这个让人很是头疼,又怀念起了vs, 其实xcode只要装简单设置一下,就能准确给出堆栈信息了, 打开 ...
- C#编程（七）----------命名空间
命名空间 命名空间的设计目的是为了提供一种让一组名称与其他名称分隔开的方式.在一个命名空间中声明的类的名称与另一个命名空间中声明的相同的类的名称不冲突. 关键字:namespace namespace ...
- unity3d如何快速接入渠道SDK之Unity篇
原文链接: http://bbs.tianya.cn/post-414-53320-1.shtml 首先我们讲一下,为什么要介绍这个插件? 是因为这个插件极大的简化了我对接渠道SDK的工作量,精力和时 ...
- python接口自动化27-urlencode编码%E6%82%A0%E6%82%A0与解码
前言 urllib.parse 里面三个方法:urlencode,quote,unquote详解. 在做接口自动化过程中,http协议在发送url的时候,是以urlencode的编码格式传过去的,通常 ...
- oracle转义符
要使用_,则需要做如下转义 select column_name from user_tab_columns where table_name = 'SYS_TERMINAL_MAPPING' AND ...
- Android之开源中国客户端源码分析（二）
1. 加载动画圈实现 <ProgressBar android:id="@+id/main_head_progress" style="@style/loading ...
- jquery 判断元素是否存在于数组中
要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等 可以使用Jquery提供的方法: $.inArray("元素(字符串)",数组名称) 进行判断 ,当 ...