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 相关文章推荐
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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验证码生成器
2017/05/24 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
JS中数据结构之栈
2019/01/01 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python 实现链表实例代码
2017/04/07 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python get获取页面cookie代码实例
2018/09/12 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python中with用法讲解
2020/02/07 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
高级运动鞋:GREATS
2019/07/19 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
公司更名通知函
2015/04/24 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA