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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
js实现带有动画的返回顶部
Aug 09 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
phpwind中的数据库操作类
2007/01/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python中加背景音乐如何操作
2020/07/19 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
人事主管岗位职责
2014/01/30 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
技能培训通讯稿
2015/07/18 职场文书