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 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP整合PayPal支付
2015/06/11 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Python正则表达式介绍
2012/08/06 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
造型师求职自荐信
2013/09/27 职场文书
国旗下的演讲稿
2014/05/08 职场文书
一体化教学实施方案
2014/05/10 职场文书
环保标语大全
2014/06/12 职场文书
个人授权委托书范本
2014/09/14 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
车位出租协议书范本
2016/03/19 职场文书