浅析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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
我的论坛源代码(五)
2006/10/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
Js图片点击切换轮播实现代码
2020/07/27 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
Python 自动补全(vim)
2014/11/30 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python 容器总结整理
2017/04/04 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
职务聘任书范文
2014/03/29 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
会计学自荐信
2014/06/03 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
python库sklearn常用操作
2021/08/23 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA