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 相关文章推荐
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Node.js的特点详解
Feb 03 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php 可变函数使用小结
2018/06/12 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python 连接sqlite及简单操作
2017/06/30 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
详解python中@的用法
2019/03/27 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python算法中的时间复杂度问题
2019/11/19 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python的链表基础知识点
2020/09/13 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
有个性的自我评价范文
2013/11/15 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
辩论赛主持词
2014/03/18 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python