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 ...
随机推荐
- 在Linux下使用sprintf代替atoi实现整型转化为char*
程序中需要用到将整型转化为char*类型,然后将两个char*类型的变量拼接.将整型转化为char*自然想到了itoa函数: 头文件:#include <stdio.h> char *it ...
- Unity知识结构总结
前言 本篇以知识结构图的形式对Unity引擎的常用基础知识内容进行了总结和梳理. 如果你学了一点关于Unity引擎的知识,又觉得太杂乱,那么希望本篇会给你一些帮助. 对应引擎版本:Unity 4.6 ...
- JavaScript对于函数的调用及原理
<js> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- windows下androidNDK环境配置
一:什么是NDK? NDK 提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so 和java 应用一起打包成apk.这些工具对开发者的帮助是巨大的. NDK 集成了交叉编译器, ...
- JAVA nio 2 和 Path 类简介
想要初步了解 NIO.2 API,也就是通常所说的“JSR203: More New I/O APIs for the Java Platform”,最好的切入点就是新的抽象类 java.nio.fi ...
- struts2中<welcome-file>index.action</welcome-file>直接设置action,404的解决方案
这几天的项目页面的访问全部改为.action访问,在修改首页时遇到了问题.将web.xml文件中<welcome-file>index.action</welcome-file> ...
- java.lang.ClassNotFoundException: Didn't find class "stu.love.neihan.MainActivity" on path: DexPathL
java.lang.ClassNotFoundException: Didn't find class "stu.love.neihan.MainActivity" on path ...
- HTTP参数CONNETCTION_TIMEOUT和SO_TIMEOUT区别
在开发中经常碰到这两个参数,但是之前对它们的真正含义一直比较模糊,今天通过调试程序并且结合官方文档,了解了两者的含义与区别. 参数的定义直接去看官方的文档(httpcore-4.3) org.apac ...
- iOS:删除、插入、移动单元格
删除.插入.移动单元格的具体实例如下: 代码如下: #import "ViewController.h" #define NUM 20 typedef enum { delet ...
- Objective-C:动态绑定
// Complex.h // 03-动态绑定 // // Created by ma c on 15/8/11. // Copyright (c) 2015年. All rights reserve ...