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和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
纯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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP.vs.JAVA
2016/04/29 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
如何在Python中编写并发程序
2016/02/27 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
详解Python装饰器
2019/03/25 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
计算机网络专业推荐信
2013/11/24 职场文书
周年庆促销方案
2014/03/15 职场文书
诚实守信演讲稿
2014/09/01 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
Python制作动态字符画的源码
2021/08/04 Python