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开发的数独游戏代码
Oct 29 Javascript
javascript学习之闭包分析
Dec 02 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 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
MVC模式的PHP实现
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python入门_条件控制(详解)
2017/05/16 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Django logging配置及使用详解
2019/07/23 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python对wav文件的重采样实例
2020/02/25 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
EJB timer的种类
2014/10/28 面试题
交通安全演讲稿
2014/01/07 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers