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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
解析php5配置使用pdo
2013/07/03 PHP
php读取3389的脚本
2014/05/06 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
化工机械应届生求职信
2013/11/04 职场文书
闭幕式主持词
2014/04/02 职场文书
预备党员转正材料
2014/12/19 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
黄河绝恋观后感
2015/06/08 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python