浅析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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
js 幻灯片的实现
Dec 06 Javascript
js的touch事件的实际引用
Oct 13 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 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简单的留言板与回复功能具体实现
2014/02/19 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
javascript中的正则表达式使用详解
2015/08/30 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python3 Random模块代码详解
2017/12/04 Python
python使用建议技巧分享(三)
2020/08/18 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
单位未婚证明范本
2014/01/18 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
社区活动邀请函范文
2014/01/29 职场文书
店面出租协议书范本
2014/11/28 职场文书
出生证明格式
2015/06/15 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python