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 闭包基础分享
Jul 10 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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 mssql 数据库分页SQL语句
2008/12/16 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php实现多城市切换特效
2015/08/09 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python线程池如何使用
2020/05/28 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
介绍信如何写
2015/01/31 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript