编程 Javascript

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()效果，并且这中方式将更快的展现网页内容。

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

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery事件用法实例汇总

Aug 29 Javascript

javascript+html5实现仿flash滚动播放图片的方法

Apr 27 Javascript

大型JavaScript应用程序架构设计模式

Jun 29 Javascript

命令行批量截图Node脚本示例代码

Jan 25 Javascript

关于Vue源码vm.$watch()内部原理详解

Apr 26 Javascript

JS数组Object.keys()方法的使用示例

Jun 05 Javascript

详解vuex之store源码简单解析

Jun 13 Javascript

Vue使用axios引起的后台session不同操作

Aug 14 Javascript

详解vue v-model

Aug 31 Javascript

vue 实现element-ui中的加载中状态

Nov 11 Javascript

微信小程序实现电影App导航和轮播

Nov 30 Javascript

nestjs中异常过滤器Exceptionfilter的具体使用

Feb 07 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数据备份

2014/05/19 PHP

PHP自动重命名文件实现方法

2014/11/04 PHP

php中ftp_chdir与ftp_cdup函数用法

2014/11/18 PHP

项目中应用Redis+Php的场景

2016/05/22 PHP

php记录搜索引擎爬行记录的实现代码

2018/03/02 PHP

PHP7匿名类的用法示例

2019/04/05 PHP

js 内存释放问题

2010/04/25 Javascript

jQuery动态设置form表单的enctype值(实现代码)

2013/07/04 Javascript

JavaScript 里的类数组对象

2015/04/08 Javascript

JS实现超精简的链接列表在固定区域内滚动效果代码

2015/11/04 Javascript

基于javascript编写简单日历

2016/05/02 Javascript

JQ选择器_选择同类元素的第N个子元素的实现方法

2016/09/08 Javascript

AngularJS模板加载用法详解

2016/11/04 Javascript

flag和jq on 的绑定多个对象和方法(必看)

2017/02/27 Javascript

实例详解JavaScript中setTimeout函数的执行顺序

2017/07/12 Javascript

基于jquery的on和click的区别详解

2018/01/15 jQuery

基于mpvue搭建微信小程序项目框架的教程详解

2019/04/10 Javascript

js遍历详解(forEach, map, for, for...in, for...of)

2019/08/28 Javascript

layui table 获取分页 limit的方法

2019/09/20 Javascript

JavaScript进阶（四）原型与原型链用法实例分析

2020/05/09 Javascript

Python简单实现TCP包发送十六进制数据的方法

2016/04/16 Python

flask中使用蓝图将路由分开写在不同文件实例解析

2018/01/19 Python

pandas 获取季度,月度,年度首尾日期的方法

2018/04/11 Python

Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)

2018/04/18 Python

python元组和字典的内建函数实例详解

2019/10/22 Python

浅析使用Python搭建http服务器

2019/10/27 Python

matplotlib交互式数据光标实现(mplcursors)

2021/01/13 Python

家长给老师的道歉信

2014/01/13 职场文书

宗教学大学生职业生涯规划范文

2014/02/08 职场文书

高考励志标语

2014/06/05 职场文书

幼儿园健康教育方案

2014/06/14 职场文书

企业年检委托书范本

2014/10/14 职场文书

省委召开党的群众路线教育实践活动总结大会报告

2014/10/21 职场文书

红色经典观后感

2015/06/18 职场文书

mysql中DCL常用的用户和权限控制

2022/03/31 MySQL

Python之matplotlib绘制折线图

2022/04/13 Python