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 switch case 另类写法
Mar 14 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
详解vue 组件注册
Nov 20 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
JS动画效果代码3
2008/04/03 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
接受捐赠答谢词
2014/01/27 职场文书
分公司经理任命书
2014/06/05 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
创业计划书之家教托管
2019/09/25 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android