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 相关文章推荐
12种不宜使用的Javascript语法整理
Nov 04 Javascript
php跨域调用json的例子
Nov 13 Javascript
JS 数字转换研究总结
Dec 26 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
浅谈JavaScript面向对象--继承
Mar 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python发送告警邮件脚本
2018/09/17 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
pymysql模块的操作实例
2019/12/17 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python定时截屏实现
2020/11/02 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
人事经理岗位职责
2014/04/28 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
《1942》观后感
2015/06/08 职场文书
教师节校长致辞
2015/07/31 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python