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淡入淡出效果的实现思路
Mar 31 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
Angular2自定义分页组件
Apr 19 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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 JSON格式的中文显示问题解决方法
2015/04/09 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python之生成多层json结构的实现
2020/02/27 Python
python实现坦克大战
2020/04/24 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
优秀班主任主要事迹材料
2014/12/16 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
学校工会工作总结2015
2015/05/19 职场文书
读书笔记格式
2015/07/02 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS