浅析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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
js编写选项卡效果
May 23 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
如何制作自己的原生JavaScript路由
May 05 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
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
js密码强度校验
2015/11/10 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python实现rsa加密实例详解
2017/07/19 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
大学生应聘自荐信
2013/10/11 职场文书
学术会议主持词
2014/03/17 职场文书
离职保密承诺书
2014/05/28 职场文书
专科生就业求职信
2014/06/22 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
民事起诉书范本
2015/05/19 职场文书
公司庆典主持词
2015/07/04 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android