浅析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点击tr实现checkbox选中的方法
Mar 19 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
VSCode 配置uni-app的方法
Jul 11 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
swfupload 多文件上传实现代码
2008/08/27 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
使用javascript插入样式
2016/03/14 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
js实现无缝滚动图
2017/02/22 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
如何利用node转发请求详解
2020/09/17 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Python实现像awk一样分割字符串
2020/09/15 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
中式面点餐厅创业计划书
2014/01/29 职场文书
2014信息公开实施方案
2014/02/22 职场文书
会计岗位职责范本
2014/03/07 职场文书
创先争优一句话承诺
2014/05/29 职场文书
高中教师个人总结
2015/02/10 职场文书
中标通知书格式
2015/04/17 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Python中with上下文管理协议的作用及用法
2022/03/18 Python