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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
js内置对象 学习笔记
Aug 01 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php去除字符串换行符示例分享
2014/02/13 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python读取文件名称生成list的方法
2018/04/27 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Python错误的处理方法
2020/06/23 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
C#基础面试题
2016/10/17 面试题
教学大赛获奖感言
2014/01/15 职场文书
二年级体育教学反思
2014/01/15 职场文书
消防安全汇报材料
2014/02/08 职场文书
应届生求职信范文
2014/06/30 职场文书
免职证明样本
2014/10/23 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
人事任命通知书
2015/04/21 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书