浅析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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
vue之nextTick全面解析
May 17 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
Python备份Mysql脚本
2008/08/11 Python
django主动抛出403异常的方法详解
2019/01/04 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
Shell如何接收变量输入
2016/08/06 面试题
管理失职检讨书
2014/02/12 职场文书
司机检讨书
2014/02/13 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
创业计划书之花店
2019/09/20 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript