浅析document.ready和window.onload的区别讲解


Posted in Javascript onDecember 18, 2013

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在“javascript执行顺序里”https://3water.com/article/44577.htm一文里有详细介绍。

jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码:

<!--   $(document).ready(function ()
         {   
          alert("我的第一个jQuery代码!");   
         });   
// -->

这段代码的意思是:当Dom Tree加载完成后,显示警告信息。

document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,

因此,使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点(来自jQuery文档):

1.确保在 <body> 元素的onload事件中没有注册函数,否则可能不会触发$(document).ready()事件。(
我尝试用下面的例子来演示这个情况,但是没有成功,所以我想这种情况只是可能发生。)

<html>
<head>
<title>My second jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //下面是load的函数含有jquery注册函数$   
function load(){  $("p").append("<b>Hello</b>"); }   
//下面是jQuery的代码   
$(document).ready(function () 
{ $("p").append("我的第一个jQuery代码!"
);  
$("p").append("<b>Hello</b>");  });  // -->
</mce:script> 
</head>  
<body onload="load()">  
<h2>jQuery 简单例子2</h2>  
<p>I would like to say: </p>  
</body> 
</html> 

2.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
浅谈Javascript 执行顺序
Dec 18 #Javascript
Javascript浅谈之引用类型
Dec 18 #Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 #Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 #Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 #Javascript
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
You might like
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python实现微信打飞机游戏
2020/03/24 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
校三好学生主要事迹
2014/01/11 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
倡议书格式范文
2014/04/14 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
师范生见习报告
2014/10/31 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
上课说话检讨书
2015/01/27 职场文书
春节晚会开场白
2015/05/29 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL