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 相关文章推荐
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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操作文件方法问答
2007/03/16 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python缩进长度是否统一
2020/08/02 Python
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
数组越界问题
2015/10/21 面试题
.NET是怎么支持多种语言的
2015/02/24 面试题
美国留学经济担保书
2014/05/20 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python