浅析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 document.images实例
May 27 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
3.从实例开始
2006/10/09 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Python操作rabbitMQ的示例代码
2019/03/19 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python3代码中实现加法重载的实例
2020/12/03 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
党员实事承诺书
2014/03/26 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
健康证明
2015/06/19 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
贷款担保书范本
2015/09/22 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
JavaScript 反射学习技巧
2021/10/16 Javascript
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python