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 相关文章推荐
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
JS定义类的六种方式详解
May 12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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遍历数组的4种方法总结
2014/07/05 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
浅谈Node.js之异步流控制
2017/10/25 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python join()函数原理及使用方法
2020/11/14 Python
python Zmail模块简介与使用示例
2020/12/19 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
王老吉广告词
2014/03/20 职场文书
宣传活动总结范文
2014/07/01 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
运动会主持人开幕词
2016/03/04 职场文书