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 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue 全局环境切换问题
Oct 27 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php数据访问之查询关键字
2016/05/09 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python 编写简单网页服务器的实例
2018/06/01 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
python生成word合同的实例方法
2021/01/12 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
What is EJB
2016/07/22 面试题
农场厂长岗位职责
2013/12/28 职场文书
个人作风剖析材料
2014/02/02 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
检讨书模板
2015/01/29 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
nginx请求限制配置方法
2021/07/09 Servers