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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
js+css实现打字效果
Jun 24 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
如何从零开始手写Koa2框架
Mar 22 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript preload&lazy load
2010/05/13 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python实现线程状态监测简单示例
2018/03/28 Python
解决python报错MemoryError的问题
2018/06/26 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
优秀应届生推荐信
2013/11/09 职场文书
党员目标管理责任书
2014/07/25 职场文书
2014年民政工作总结
2014/11/26 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android