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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP 实现重载
2021/03/09 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
python基础知识小结之集合
2015/11/25 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
知名企业招聘广告词大全
2014/03/18 职场文书
学校清明节活动总结
2014/07/04 职场文书
教师自查自纠材料
2014/10/14 职场文书
Flask response响应的具体使用
2021/07/15 Python
用Python生成会跳舞的美女
2022/01/18 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
vue的项目如何打包上线
2022/04/13 Vue.js
python中的random模块和相关函数详解
2022/04/22 Python