jQuery中的read和JavaScript中的onload函数的区别


Posted in Javascript onAugust 27, 2014

在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的时候需要用到。

window.onload = function(){

    // 当网页加载完成后执行这里的代码块

};

而在jQuery中也有一个对应的函数,即等待网页加载完后执行代码块
$(document).ready(function(){

    // 当网页加载完成后执行这里的代码块     

});

以上这两个看似一样的功能,但实际有很大的区别。

onload不仅在创建DOM树之后,而且在所有外部资源全部加载完毕,并且整个页面在浏览器窗口中显示完毕之后,才会执行。这些资源不仅包括图片资源,而且包括嵌入在页面上的flash视频,如果图片或者flash过多,那么会一段很长加载时间,也就意味这延迟执行代码块的时间会更多。

jQuery中的ready()方法只需要等待文档结构被完全解析并且浏览器已经把HTML转化为DOM树后就会执行代码块,这里注意的是仅仅是DOM,网页中的图片,flash等外部资源都毫无关联。

由此可见jQuery中的ready()方法将缩短等待时间。

当然还有另外一种方式,就是把脚本都在<body>标签后面,这样的话网页按照文档流顺序执行,也会达到JavaScript中onload或者jQuery中ready()效果,并且这中方式将更快的展现网页内容。

Javascript 相关文章推荐
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
javascript实现的一个随机点名功能
Aug 26 #Javascript
JS按回车键实现登录的方法
Aug 25 #Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 #Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 #Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 #Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 #Javascript
js获取checkbox复选框选中的选项实例
Aug 24 #Javascript
You might like
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP反射API示例分享
2016/10/08 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Django实现学生管理系统
2019/02/26 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
工作检讨书怎么写
2014/10/10 职场文书
英文慰问信
2015/02/14 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang