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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery原生的动画效果
Jul 10 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 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判断网页是否gzip压缩
2013/06/25 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php实现paypal 授权登录
2015/05/28 PHP
php中namespace use用法实例分析
2016/01/22 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python无序链表删除重复项的方法
2020/01/17 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
学python需要去培训机构吗
2020/07/01 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
数控技术应届生求职信
2013/11/13 职场文书
我未来的职业规划范文
2014/01/11 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python
服务器SVN搭建图文安装过程
2022/06/21 Servers