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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
vue实现评论列表功能
Oct 25 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue组件系列之TagsInput详解
May 14 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python写入文件自动换行问题的方法
2019/07/05 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python 有效的括号的实现代码示例
2019/11/11 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
艺术学院毕业生自荐信
2014/07/05 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
2019各种承诺书范文
2019/06/24 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python