jQuery中的read和JavaScript中的onload函数的区别
在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的document.ready功能的实现代码
- JQuery的ready函数与JS的onload的区别详解
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- JQuery的read函数与js的onload不同方式实现
- javascript 模拟JQuery的Ready方法实现并出现的问题
- JavaScript的jQuery库中ready方法的学习教程
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- jquery $(document).ready() 与window.onload的区别
- jQuery之$(document).ready()使用介绍
- jQuery的Read()方法代替原生JS详解
相关文章
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果,结合完整实例形式分析了jQuery使用插件FusionCharts载入xml格式数据绘制柱状图与折线图组合图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-04-04IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
通过本篇文章主要给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题,需要的朋友可以一起来学习2015-08-08
最新评论