浅析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弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
微信小程序的引导页实现代码
Jun 24 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue中如何使用ztree
2018/02/06 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python cumsum函数的具体使用
2019/07/29 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python中如何使用虚拟环境
2020/10/14 Python
python SOCKET编程基础入门
2021/02/27 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
班组建设经验交流材料
2014/05/12 职场文书
生物科学专业自荐书
2014/06/20 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
历史博物馆观后感
2015/06/05 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python