浅析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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
Three.js学习之几何形状
Aug 01 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
浅谈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具体实现代码
2010/10/12 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
使用JS 清空File控件的路径值
2013/07/08 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
vue自动化表单实例分析
2018/05/06 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
python实现从web抓取文档的方法
2014/09/26 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
django如何实现视图重定向
2019/07/24 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
兽医医药专业求职信
2014/07/27 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书