浅析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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
vue跨域解决方法
Oct 15 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
yii操作cookie实例简介
2014/07/09 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python每天必学之bytes字节
2016/01/28 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
社区学习十八大感想
2014/01/22 职场文书
商业房地产广告语
2014/03/13 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
公司领导班子对照材料
2014/08/18 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
创业计划书介绍
2019/04/24 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers