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 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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与SQL注入攻击防范小技巧
2011/09/16 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
node.js入门教程
2014/06/01 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
django之session与分页(实例讲解)
2017/11/13 Python
python实现log日志的示例代码
2018/04/28 Python
简单了解python元组tuple相关原理
2019/12/02 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
numpy实现RNN原理实现
2021/03/02 Python
计算机网络专业推荐信
2013/11/24 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年大学生实习评语
2015/03/25 职场文书
我的1919观后感
2015/06/03 职场文书
《叶问2》观后感
2015/06/15 职场文书
开学典礼致辞
2015/07/29 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js