浅析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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
js实现打字小游戏
Dec 17 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
thinkPHP中分页用法实例分析
2015/12/26 PHP
js验证表单大全
2006/11/25 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
js a标签点击事件
2017/03/30 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Python 元类使用说明
2009/12/18 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
高中语文教学反思
2014/01/16 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
社团活动总结报告
2014/06/27 职场文书
创业计划书介绍
2019/04/24 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android