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父窗口控制只弹出一个子窗口
Apr 10 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP 采集心得技巧
2009/05/15 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python抓取百度查询结果的方法
2015/07/08 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
类和结构的区别
2012/08/15 面试题
网络管理专业求职信
2014/03/15 职场文书
自我鉴定总结
2014/03/24 职场文书
植树节活动总结
2014/04/30 职场文书
社区健康教育工作方案
2014/06/03 职场文书