编程 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 相关文章推荐

json格式化/压缩工具 Chrome插件扩展版

May 25 Javascript

完美兼容各大浏览器获取HTTP_REFERER方法总结

Jun 24 Javascript

超精准的javascript验证身份证号的具体实现方法

Nov 18 Javascript

原生js实现移动端瀑布流式代码示例

Dec 18 Javascript

浅析JavaScript回调函数应用

May 22 Javascript

如何使用vuejs实现更好的Form validation?

Apr 07 Javascript

React + webpack 环境配置的方法步骤

Sep 07 Javascript

vue-baidu-map 进入页面自动定位的解决方案(推荐)

Apr 28 Javascript

使用Vue实现图片上传的三种方式

Jul 17 Javascript

vue element中axios下载文件（后端Python）

May 10 Javascript

JavaScript之Blob对象类型的具体使用方法

Nov 29 Javascript

js实现简易ATM功能

Oct 27 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实现小写金额转换大写金额的代码(精确到分)

2012/01/10 PHP

php启用sphinx全文搜索的实现方法

2014/12/24 PHP

smarty内置函数capture用法分析

2015/01/22 PHP

解读IE和firefox下JScript和HREF的执行顺序

2008/01/12 Javascript

js动态修改input输入框的type属性(实现方法解析)

2013/11/13 Javascript

javascript中数组的sort()方法的使用介绍

2013/12/18 Javascript

利用jquery.qrcode在页面上生成二维码且支持中文

2014/02/12 Javascript

jQuery实现字符串按指定长度加入特定内容的方法

2015/03/11 Javascript

JS模式之单例模式基本用法

2015/06/30 Javascript

clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

2015/10/10 Javascript

基于jQuery实现左右图片轮播（原理通用）

2015/12/24 Javascript

Highcharts入门之简介

2016/08/02 Javascript

jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

2016/09/18 Javascript

在Web项目中引入Jquery插件报错的完美解决方案(图解)

2016/09/19 Javascript

基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）

2016/11/17 Javascript

jquery select2的使用心得(推荐)

2016/12/04 Javascript

JS实现微信摇一摇原理解析

2017/07/22 Javascript

javascript获取指定区间范围随机数的方法

2017/09/08 Javascript

使用vue如何构建一个自动建站项目

2018/02/05 Javascript

vue router 配置路由的方法

2018/07/26 Javascript

[02:20]DOTA2英雄基础教程黑暗贤者

2013/12/19 DOTA

Selenium鼠标与键盘事件常用操作方法示例

2018/08/13 Python

python实现简单日期工具类

2019/04/24 Python

python面向对象实现名片管理系统文件版

2019/04/26 Python

Python操作远程服务器 paramiko模块详细介绍

2019/08/07 Python

Python通过递归获取目录下指定文件代码实例

2019/11/07 Python

django使用channels实现通信的示例

2020/10/19 Python

Html5与App的通讯方式详解

2019/10/24 HTML / CSS

Tomcat中怎么使用log4j输出所有的log

2016/07/07 面试题

Ibatis中如何提高SQL Map的性能

2013/05/11 面试题

介绍一下Java中的Class类

2015/04/10 面试题

水毁工程实施方案

2014/04/01 职场文书

本科毕业生求职信

2014/06/15 职场文书

爱护公共设施倡议书

2014/08/29 职场文书

Redisson实现Redis分布式锁的几种方式

2021/08/07 Redis

NodeJs使用webpack打包项目的方法详解

2022/02/28 NodeJs