jquery $(document).ready()和window.onload的区别浅析


Posted in Javascript onFebruary 04, 2015

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

1.执行时间
        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
         window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
         $(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
         window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

$(document).ready(function(){

…

});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就

需要用到:

$(window).load(function() {

…
});

总结对比:

jquery $(document).ready()和window.onload的区别浅析

Javascript 相关文章推荐
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 #Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 #Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 #Javascript
js对字符的验证方法汇总
Feb 04 #Javascript
You might like
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php购物车实现代码
2011/10/10 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
AngularJS实现网站换肤实例
2021/02/19 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python enumerate内置库用法解析
2020/02/24 Python
python如何删除列为空的行
2020/07/17 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
临床专业自荐信
2014/06/22 职场文书
护理学专业求职信
2014/06/29 职场文书
个人党性分析总结
2015/03/05 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
小学班级标语口号大全
2015/12/26 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Python机器学习之基础概述
2021/05/19 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Python编写nmap扫描工具
2021/07/21 Python