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开发随笔二 动态加载js和文件
Nov 25 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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动态生成静态HTML网页的代码
2010/03/04 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
javascript中的隐式调用
2018/02/10 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
员工安全承诺书
2014/05/22 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
交通安全教育主题班会
2015/08/12 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers