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实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php 发送带附件邮件示例
2014/01/23 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
JSON Web Tokens的实现原理
2017/04/02 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python读文件的步骤
2019/10/08 Python
Python reversed函数及使用方法解析
2020/03/17 Python
HashMap和Hashtable的区别
2013/05/18 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
五一服装活动方案
2014/01/11 职场文书
《雾凇》教学反思
2014/02/17 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
现场施工员岗位职责
2014/03/10 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
民族精神月活动总结
2014/08/28 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
会议通知范文
2015/04/15 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Java数据结构之堆(优先队列)
2022/05/20 Java/Android