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 相关文章推荐
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery选择器全集详解
Nov 24 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python使用mysql的两种使用方式
2018/03/07 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
新浪网技术部笔试题
2016/08/26 面试题
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
团支部推优材料
2014/05/21 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
新兵入伍心得体会
2014/09/04 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书