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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JavaScript实现猜数字游戏
May 20 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php实现简单洗牌算法
2013/06/18 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
TensorFlow实现创建分类器
2018/02/06 Python
用Django写天气预报查询网站
2018/10/21 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Keras实现DenseNet结构操作
2020/07/06 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
人力资源行政经理自我评价
2013/10/23 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
公司领导班子对照材料
2014/08/18 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技