Question

jquery ready 与window.onload的有什么区别

Answer 1

扒了一下jquery2.0的源码。把几个关键的片段放出来。
//1 
completed = function() {
		document.removeEventListener( "DOMContentLoaded", completed, false );
		window.removeEventListener( "load", completed, false );
		jQuery.ready();
	};

//2 
jQuery.fn = jQuery.prototype = {
	ready: function( fn ) {
		//
		jQuery.ready.promise().done( fn );
		return this;
	},
}

//3 
jQuery.ready.promise = function( obj ) {
	if ( !readyList ) {
		readyList = jQuery.Deferred();
		if ( document.readyState === "complete" ) {
		 	setTimeout( jQuery.ready );
		} else {
		document.addEventListener( "DOMContentLoaded", completed, false );
		window.addEventListener( "load", completed, false );
		}
	}
	return readyList.promise( obj );
};

//4
jQuery.extend({
	Deferred: function( func ) {
		//这里代码太复杂。不扒了。
		//但是大概可以理解，并简化为这样。
	  return {
	    done:function(fn){
		   fn.call( document ,Jquery );
		}
	  };
	} 
	
所以:$(document).ready(fn);实际上就是监听window.onload事件。然后添加事件函数的。没什么区别。
但有一点要注意：用了window.onload=function(){}就不要用$(document).ready(function(){});
否则会执行两次初始化。原因是，jquery的ready通过addEventListener实现的，意味着和window.onload不冲突。它
所以一个window.onload就绑定了两个函数。就会执行两次。