JQ中$(window).load和$(document).ready区别与执行顺序


Posted in Javascript onMarch 01, 2017

JQ中的$(document).ready()大家应该用的非常多,基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).load相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序

一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息
那么我们在编写JS脚本时什么情况下使用$(document).ready()又在什么情况下使用$(window).load呢,我们先来了解一下两者的功能

一、$(document).ready()

从字面的意思上理解,就是文档准备好了。也就是浏览器已经加载并解析完整个html文档,dom树已经建立起来了,然后执行此函数

原生JavaScript中的写法如下:

document.ready=function(){
 alert("ready"); 
}

jQuery中的写法如下:

$(document).ready(function(){
 alert("ready");
});

$(function(){
 alert("ready");
});

二、$(window).load

在网页中所有元素(包括页面中图片,css文件等所有关联文件)完全加载到浏览器后才执行

原生JavaScript中的写法如下:

window.onload = function(){ 
 alert("onload"); 
};

jQuery中的写法如下:

$(window).load(function(){
 alert("onload");
});

两者的区别在于:

1.执行时间不同

$(document).ready()是在页面完成HTML的加载并建立了DOM树之后就开始执行,但这并不代表页面的所

有数据已经全部加载完成,一些大的图片有会在建立DOM树之后很长一段时间才行加载完成,而

$(window).load()就是整个页面已经加载完毕后才执行,包括图片等一些关联文件。

2.可以被执行的次数不同

$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

3.执行的效率不同

如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行

总结一下就是:$(window).load()在$(document).ready之后执行,且页面中所有内容全部加载完成后才会执行,两者的使用时机一目了然,大家可以自行决定。

Javascript 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
Angular2库初探
Mar 01 #Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 #Javascript
JavaScript两个变量交换值的实现方法
Mar 01 #Javascript
js实现仿购物车加减效果
Mar 01 #Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 #Javascript
js实现拖拽功能
Mar 01 #Javascript
js实现下拉菜单效果
Mar 01 #Javascript
You might like
php正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python的exec、eval使用分析
2017/12/11 Python
python 读入多行数据的实例
2018/04/19 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
谈谈Python中的while循环语句
2019/03/10 Python
python和c语言的主要区别总结
2019/07/07 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
领导干部培训感言
2014/01/23 职场文书
运动会邀请函范文
2014/02/06 职场文书
委托证明书
2014/09/17 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
使用python创建股票的时间序列可视化分析
2022/03/03 Python