浅析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中[attribute^=value]选择器用法实例
Dec 31 Javascript
Augularjs-起步详解
Jul 08 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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源代码
2006/10/09 PHP
php 保留字列表
2012/10/04 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
详解【python】str与json类型转换
2019/04/29 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
django url到views参数传递的实例
2019/07/19 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python中pickle模块浅析
2020/12/29 Python
电脑教师的教学自我评价
2013/11/26 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
护士心得体会范文
2016/01/25 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏