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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php错误日志简单配置方法
2016/07/11 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
2014年母亲节演讲稿范文
2014/05/07 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
综合实践活动报告
2015/02/05 职场文书
请客吃饭开场白
2015/06/01 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL
Golang gRPC HTTP协议转换示例
2022/06/16 Golang