JQuery onload、ready概念介绍及使用方法


Posted in Javascript onApril 27, 2013

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)
一般样式控制的,比如图片大小控制放在onload 里面加载;

jS事件触发的方法,可以在ready 里面加载;
用jQ的人很多人都是这么开始写脚本的:
通常的写法

$(function(){ 
// do something 
});

其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){ 
//do something 
})

也等于下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){ 
//do something 
})

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载 在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
加载 多个函数的问题
■<body onload="a();b();">
</body>
在Onload事件中 只能这样加载,很丑陋…
■而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行
代码和内容不分离
这个貌似不用说了,让人深恶痛绝-.-!!◦ 执行先后顺序不同
■对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很 长时间.
■ 而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这 个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.

<script type="text/javascript"> 
$(window).load(function() { 
alert("hello"); 
}); 
$(window).load(function() { 
alert("hello again"); 
}); 
</script>

上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法
<script type="text/javascript"> 
$(window).unload(function() { 
alert("good bye"); 
}); 
</script>

上面代码会在页面关闭时引发.
在 所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法
<body> 
<script type="text/javascript"> 
(function() { 
alert("hi"); 
})(jQuery) 
</script> 
</body>

对, 就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:
<body> 
<div id="test">this is the content</div> 
<script type="text/javascript"> 
alert($("#test").html());//I Can display the content 
</script> 
</body> 
<body> 
<script type="text/javascript"> 
alert($("#test").html());//I Can't display the content 
</script> 
<div id="test">this is the content</div> 
</body>

上面两段代码, 第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.
Javascript 相关文章推荐
js函数返回多个返回值的示例代码
Nov 05 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
移动端界面的适配
Jan 11 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 #Javascript
javascript中强制执行toString()具体实现
Apr 27 #Javascript
用客户端js实现带省略号的分页
Apr 27 #Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 #Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php验证码生成代码
2015/11/11 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
简单了解python变量的作用域
2019/07/30 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python GUI计算器的实现
2020/10/09 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
教育学习自我评价
2014/02/03 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年环保工作总结
2014/11/26 职场文书
区域经理岗位职责
2015/02/02 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python