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对象所有属性和方法的函数
Oct 16 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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开发中常用的字符串操作函数
2011/02/08 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
在网页中控制wmplayer播放器
2006/07/01 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python文件读写常见用法总结
2019/02/22 Python
opencv python如何实现图像二值化
2020/02/03 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
应届生英语教师求职信
2013/11/05 职场文书
租房协议书样本
2014/08/20 职场文书
你会写请假条吗?
2019/06/26 职场文书