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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
js 函数性能比较方法
Aug 24 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
C#基础面试题
2016/10/17 面试题
求职信模版
2013/11/30 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
欧元符号 €
2022/02/17 杂记