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事件是要在页面的元素全部加载完了才触发的，这也包括页面上的css、js、图片，以及大的表格数据。如果页面上图片较多或图片太大，加载需要较多时间，就会导致页面无响应，或者用户做了其它操作了。

而jQuery中的 $(document).ready() 则是在页面的dom(节点)加载完后就可以做相应的操作，而不用等待全部元素加载完成，比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。

 

一般不建议使用JavaScript 中 window.onload 方法，这里主要讲一下 jQuery ( $(selector).ready())。

jQuery ( $(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()的内容。

 

 

JavaScript 中 window.onload​ 事件

window.onload() 事件通常用于检测文档内容或者图片是否加载完毕。

浏览器支持:

（1）IE浏览器支持此事件。

（2）edge浏览器支持此事件。

（3）火狐浏览器支持此事件。

（4）Opera浏览器支持此事件。

（5）chrome浏览器支持此事件。

（6）safari浏览器支持此事件。

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:

（1）将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。

（2）通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱（其实推荐使用），我们通常需要将脚本代码放在一个更为合适的地方，window.onload方式将是一个良好的选择。

window.onload是一个事件，当文档内容完全加载完成会触发该事件。可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

 

window.onload​ 示例 

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://blog.mimvp.com/" /> 
<title>米扑博客</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

代码的初衷是将div的背景颜色设置为#F90，但是并没有实现此效果

因为代码是顺序执行的，当执行到document.getElementById("#bg").style.backgroundColor="#F90"的时候，还没有加载到此div对象，所以设置也就不能够成功。

 

代码修改如下: 

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://blog.mimvp.com/" /> 
<title>米扑博客</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

代码完成将div背景颜色设置为#F90，将设置背景颜色的代码放置在window.onload的事件处理函数中，当文档加载完成后，才会执行事件处理函数，保证文档已经加载完成。

 

window.onload 事件处理函数绑定

1）window.onload=function(){}

前面的代码就是使用此种方式为window.onload事件绑定事件处理函数，绑定的是一个匿名函数，当然也可以绑定具名函数，代码实例如下: 

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://blog.mimvp.com/" /> 
<title>米扑博客</title>
<script type="text/javascript">
window.onload=function myalert(){
  alert("绑定成功！");
}
</script>
</head>
<body>
  hello mimvp.com
</body>
</html>

不能以以下方式为此事件绑定多个事件处理函数： 

window.onload=function a(){}
window.onload=function b(){}

上代码不能为window.onload事件绑定多个事件处理函数，最后一个会覆盖前面的所有函数。

代码可以变通一下: 

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="https://blog.mimvp.com/" /> 
<title>米扑博客</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  function a(){
    document.getElementById("bg").style.backgroundColor="#F90";
  }
  function b(){
    document.getElementById("bg").style.width="200px";
  }
  a();
  b();
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>
</html>

 

2）addEventListener() 和 attachEvent()

下面再看一个为Image图片对象注册load事件处理函数的代码。 

var img=new Image();
img.onload=function(){
  var iheight=img.height;
  var iwidth=img.width;
  alert(iwidth);
};
img.src="delete.gif";

 

 

参考推荐：

js 动态添加 onclick 事件