jQuery Ready 与 Window onload 的区别(转)
“我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?
一
般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多
或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数(
$(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部
元素加载完成.例如:
1 $(document).ready(function (){ alert('use in page script tag') });
2 $(document).ready(function (){ alert('use in import js file') });
现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听
DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果
isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:

1 ready: function(fn) {
2 // 绑定监听器
3 bindReady();
4 // 如果 DOM 加载完成
5 if ( jQuery.isReady )
6 // 马上运行此函数
7 fn.call( document, jQuery );
8 // 否则保存起来
9 else
10 // 把函数加入缓存数组中
11 jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
12 return this;
13 }

让我们看看jquery如果实现不同浏览器dom加载完成的通知 bindReady()函数:

1 var readyBound = false;
2 function bindReady(){
3 if ( readyBound ) return;
4 readyBound = true;
5
6 // Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
7 if ( document.addEventListener && !jQuery.browser.opera)
8 // 直接使用事件回调即可
9 document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
10
11 // 如果是ie并且不是嵌在frame中
12 // 就需要不断地检查文档是否加载完
13 if ( jQuery.browser.msie && window == top ) (function(){
14 if (jQuery.isReady) return;
15 try {
16 // 这个地方标记一下,在后面解析(1)
17 document.documentElement.doScroll("left");
18 } catch( error ) {
19 //// 这个地方标记一下,在后面解析(2)
20 setTimeout( arguments.callee, 0 );
21 return;
22 }
23 // and execute any waiting functions
24 jQuery.ready();
25 })();
26
27 if ( jQuery.browser.opera )
28 document.addEventListener( "DOMContentLoaded", function () {
29 if (jQuery.isReady) return;
30 for (var i = 0; i < document.styleSheets.length; i++) // 标记(3)
31 if (document.styleSheets[i].disabled) {
32 setTimeout( arguments.callee, 0 );
33 return;
34 }
35 // and execute any waiting functions
36 jQuery.ready();
37 }, false);
38
39 if ( jQuery.browser.safari ) {
40 var numStyles;
41 (function(){
42 if (jQuery.isReady) return;
43 if ( document.readyState != "loaded" && document.readyState != "complete" ) { // 标记(4)
44 setTimeout( arguments.callee, 0 );
45 return;
46 }
47 if ( numStyles === undefined )
48 numStyles = jQuery("style, link[rel=stylesheet]").length;
49 if ( document.styleSheets.length != numStyles ) { // 标记(5)
50 setTimeout( arguments.callee, 0 );
51 return;
52 }
53 // and execute any waiting functions
54 jQuery.ready();
55 })();
56 }
57
58 // A fallback to window.onload, that will always work
59 jQuery.event.add( window, "load", jQuery.ready ); // 标记(6)
60 }
61 }

1):这个主要是测出ie下的dom ready,原理在这里http://javascript.nwbox.com/IEContentLoaded/,利用在ie下.当dom未完成解析 时,调用document的document.documentElement.doScroll(”left”)会出错这个小技巧便可得知dom有没有 ready了.
(2):setTimeout( arguments.callee, 0
)这句是表示延迟0秒调用,实际上它不会马上就调用,而是会尽可能快地调用,它告诉浏览器为当前任何挂起的事件运行完事件句柄并且完成了文档当前状态的更
新后才调用. Arguments.callee即是外层的匿名函数,参数的调用者
(3):这个地方你也许觉得奇怪,为什么不在mozilla那里一起处理呢? 原因就是opera的DOMContentLoaded事件发生后,其css样式是还没完全可用的,所以要特殊处理,就是判断每个css的tag都是不是enable了.
(4),(5):safari中document.readyState的状态为loaded或complete时,css文件引入还未能确定是不是解析完了的,所以要通过判断其css文件数目
(6):最后,如果上面的hack都不支持的话…就用最保险的load事件,保证能执行到初始化代码. “
jQuery Ready 与 Window onload 的区别(转)的更多相关文章
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- 转 $(document).ready()与window.onload的区别
$(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...
- document.ready与window.onload的区别
代码分析: $(document).ready(function() { .... }); window.onload=function(){ ....} 两段代码功能上可以互换,但又有许多区别: 1 ...
- 前端开发学习之——dom ready和window onload的区别
1.ready事件是在页面中所有DOM结构已完全加载时执行,监听的是 DomContentload 事件,初始化并解析完成时触发,不需要等待样式表.图片和 iframes 加载完,也就是说当这个事件触 ...
- $(document).ready和window.onload的区别
$(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...
- $(document).ready 与 window.onload的区别?
$(document).ready = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
随机推荐
- Keepalived 配置实例
Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况,动态修改LVS转发规则 ...
- IplImage 结构解读
IplImage 结构解读: typedef struct _IplImage { int nSize; /* IplImage大小,等于wi ...
- 使用Fiddler针对Android手机网络请求抓包
本文转载自大牛Trinea的博文:Android利用Fiddler进行网络数据抓包 主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信. ...
- jQueryAjax笔记
ajax优点:能在不刷新整个页面的前提下更新数据,使用户操作与服务器响应异步化. ajax缺点:破坏浏览器“前进”.“后退”按钮的正常功能,搜索引擎爬虫不能理解那些奇怪的JS代码和因此引起的页面内容的 ...
- Python切片
切片是啥, 可以吃么 切片肿么用哈 辣么长,记不住 切片是啥, 可以吃么 嘛,所谓切片故名思意就有选取的意思啦, 跟java里面的subString()意思差不多, 从原始的字符串中按规则提取出新的字 ...
- updateEasyuiTab
//tabContainer:easyui-tabs或者id,title名称 this.updateEasyuiTab = function (tabContainer, outTitle, outU ...
- 【Java】:ehcache
ehcache是一个纯Java进程内缓存框架,是hibernate默认的Cacheprovider.(出自百度百科). 1. 快速2. 简单3. 多种缓存策略4. 缓存数据有两级:内存和磁盘,因此无需 ...
- Python html.parser库学习小结
分类路径:/Datazen/DataMining/Crawler/ 前段时间,一朋友让我做个小脚本,抓一下某C2C商城上竞争对手的销售/价格数据,好让他可以实时调整自己的营销策略.自己之前也有过写 ...
- Bootstrap 折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...
- 断言(ASSERT)的用法
ASSERT ()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继续执行后面的语句.这个宏通常原来判 ...