浅析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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jquery实现倒计时效果
Dec 14 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
详解jquery和vue对比
Apr 16 jQuery
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
OpenLayers3实现图层控件功能
Sep 25 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下保存远程图片到本地的办法
2010/08/08 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Python模拟三级菜单效果
2017/09/11 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
学习党章心得体会2016
2016/01/15 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
django 认证类配置实现
2021/11/11 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js