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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
angularJS深拷贝详解
Mar 23 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
JavaScript实现省市区三级联动
Feb 13 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 过滤器实现代码
2010/08/09 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
ajax异步请求详解
2017/01/06 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python实现图片彩色转化为素描
2019/01/15 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
.net面试题
2016/09/17 面试题
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
党员个人党性分析材料
2014/12/18 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书