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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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
PHP5 安装方法
2007/01/15 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
python中的全局变量用法分析
2015/06/09 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python简单的制作图片验证码实例
2017/05/31 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python实现图片彩色转化为素描
2019/01/15 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
个人贷款授权委托书样本
2014/10/07 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
社区党支部公开承诺书
2015/04/29 职场文书