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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
element跨分页操作选择详解
Jun 29 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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配置文件中最常用四个ini函数
2007/03/19 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
js星星评分效果
2014/07/24 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
setTimeout学习小结
2017/02/08 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
python友情链接检查方法
2015/07/08 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
EJB的基本架构
2016/09/22 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
网络技术专业求职信
2014/07/13 职场文书
班主任自我评价范文
2015/03/11 职场文书
仓库管理制度范本
2015/08/04 职场文书