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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
Vue 数据绑定的原理分析
Nov 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
PHP 中执行系统外部命令
2006/10/09 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
js left,right,mid函数
2008/06/10 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
vue组件学习教程
2017/09/09 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
python多进程共享变量
2016/04/06 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
单位绩效考核方案
2014/05/11 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
李强感恩观后感
2015/06/17 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript