jQuery中的ready函数与window.onload谁先执行


Posted in Javascript onJune 21, 2016

A.关于$(document).ready():

jquery中的$(document).ready(),那$(document).ready()到底是什么作用呢?是不是可以用window.onload = function(){ ... }来实现呢?

这里,我们要明确二者之间的区别。

我们使用window.onload = function(){ ... },是希望在页面被载入时执行function中的处理,但是这些JS代码只有在页面上的全部内容加载完成(包括头部的banner广告,所有图片)的时候才会执行。将window.onload放在最上边的原因就是当你第一次运行codes的时候,HTML'document'还没有加载完成。

而$(document).ready()却不需要载入得这么“完全”。$(document).ready()是在DOM结构载入完后执行的,而 window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完。因此,ready肯定在onload 之前发生,页面加载大或者多的图片而使onload执行延后,使用jquery的ready可缓解此问题。

我们应该紧记,jquery的ready是指在页面的DOM模型加载完后执行指定的函数。之所以经常用$(document).ready()来取代 window.onload,就是因为它是在dom模型加载完成后就执行,而window.onload是在dom元素加载完全后才执行。

B.关于document.onload和window.onload:

document.onload和window.onload没有本质的区别,都是指页面载入完成后执行指定函数。

做一个比较吧:

window .onload =function (){alert ("welcome");}
 $(document).ready(
 function (){
  alert ("thanks for visiting!");
 }
);

运行后你会发现 $(document).ready()先执行。

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
纯JS前端实现分页代码
Jun 21 #Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 #Javascript
jQuery代码性能优化的10种方法
Jun 21 #Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 #Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 #Javascript
JavaScript检测原始值、引用值、属性
Jun 20 #Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 #Javascript
You might like
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
canvas时钟效果
2017/02/16 Javascript
PHP7新特性简述
2017/06/11 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
微信小程序-API接口安全详解
2019/07/16 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
护士毕业实习感言
2014/03/05 职场文书
导师推荐信范文
2014/05/09 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
军训个人总结
2015/03/03 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
推销搭讪开场白
2015/05/28 职场文书
党员理论学习心得体会
2016/01/21 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏