jquery 的ready() 与window.onload()的区别

作web开发时经常使用Jquery中$(document).ready()和JavaScript中的window.onload方法，二者都是要在页面加载完成之后加载的方法，可是这二者仍是有很大区别的。最近遇到了这样的问题，查询了多篇文章，作一下总结。

简单来讲，要以用如下张表来表示 ：

Jquery的ready()与Javascrpit的load()

	window.onload()	$(document).ready()
加载时机	必须等待网页所有加载完毕（包括图片等），而后再执行JS代码	只须要等待网页中的DOM结构加载完毕，就能执行JS代码
执行次数	只能执行一次，若是第二次，那么第一次的执行会被覆盖	能够执行屡次，第N次都不会被上一次覆盖
举例	如下代码没法正确执行：   window.onload = function() { alert(“text1”);}; window.onload = function() { alert(“text2”);};  结果只输出第二个	如下代码正确执行：  $(document).ready(function(){alert(“Hello”)}); $(document).ready(function(){alert(“Hello”)}); 结果两次都输出
简写方案	无	$(function () {})

 通常状况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素所有加载完了才触发的,这也包括页面上的图片，以及大的表格数据。若是页面上图片较多或图片太大,加载须要较多时间，就会致使页面无响应，或者用户作了其它操做了。

而Jeuery中的ready()则是在页面的dom(节点)加载完后就能够作相应的操做,而不用等待所有元素加载完成.好比只知道页面某处有一张图片，而不必定要等它显示出来就能够为它绑定点击方法。

 

load()通常不建议使用，这里主要讲一下( $(selector).ready())。

原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不一样浏览器,jquery运做方式不同).固然遇到调用ready函数的时候,若是isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:

 

ready: function(fn) {
// 绑定监听器
bindReady();
// 若是 DOM 加载完成
if ( jQuery.isReady )
// 立刻运行此函数
fn.call( document, jQuery );
// 不然保存起来
else
// 把函数加入缓存数组中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}

固然，jquery对不一样的浏览器dom加载完成的通知 bindReady()函数也是不一样的

var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true;

// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回调便可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false );

// 若是是ie而且不是嵌在frame中
// 就须要不断地检查文档是否加载完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {

document.documentElement.doScroll("left");
} catch( error ) {

setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();

if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++) 
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false);

if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { 
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { 
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}

// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready ); 
}
}

 

这里最要注意的是，IE只有在页面不是嵌入frame中的状况下才和其它浏览器等同样，在DOM加载完成之后就执行$(document).ready()的内容。

参考文章：一、http://www.cnblogs.com/kingwell/archive/2012/09/09/2677252.html

              二、http://blog.csdn.net/xiebaochun/article/details/36375481