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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
很可爱的输入框
Aug 03 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
深入理解vue Render函数
Jul 19 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python解析文件示例
2014/01/23 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
深入理解Django中内置的用户认证
2017/10/06 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python中提高pip install速度
2020/02/14 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
Yahoo-PHP面试题3
2012/01/14 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
企业为何需要商业计划书
2013/12/26 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
如何Python使用re模块实现okenizer
2022/04/30 Python