浅析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 相关文章推荐
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
浅谈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
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
opencv python如何实现图像二值化
2020/02/03 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
代理班主任的自我评价
2014/02/04 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
争先创优演讲稿
2014/09/15 职场文书
小学英语复习计划
2015/01/19 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
学校教师培训工作总结
2015/10/14 职场文书
Python字符串格式化方式
2022/04/07 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
MySQL索引失效场景及解决方案
2022/07/23 MySQL