浅析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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
vue-router定义元信息meta操作
Dec 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python引用DLL文件的方法
2015/05/11 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python入门必须知道的11个知识点
2018/03/21 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
python实现简单遗传算法
2020/09/18 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
师范生见习报告范文
2014/11/03 职场文书
会计岗位工作总结
2015/08/12 职场文书