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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
javascript getElementsByTagName
Jan 31 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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 模板高级篇总结
2006/12/21 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP设置进度条的方法
2015/07/08 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python语言快速上手学习方法
2018/12/14 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
浅谈Python中的字符串
2020/06/10 Python
Python爬取某平台短视频的方法
2021/02/08 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
考试违纪检讨书
2014/02/02 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
债务授权委托书范本
2014/10/17 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL