window.onload 与 $(document).ready() 区别-优快云博客

本文详细解释了JavaScript中window.onload事件与jQuery $document.ready函数之间的区别。window.onload在页面所有内容（包括DOM、异步JS、frames和图像）完全加载后触发；而$document.ready则在DOM加载完成后即刻执行，不等待其他资源加载。

2019独角兽企业重金招聘Python工程师标准>>>

A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images. You can also use body οnlοad=. Both are the same; window.onload = function(){} and <body onload="func();"> are different ways of using the same event.

一个window load 事件触发条件是你页面完全加载时（页面完全加载包括DOM内容，异步JS,frames框架，和图像加载）。你可以用window.onload = function(){} 和 <body onload="func();"> 添加事件监听器。

jQuery $document.ready function event executes a bit earlier than window.onload and is called once the DOM(Document object model) is loaded on your page. It will not wait for the images, frames to get fully load.

jQuery $document.ready 函数事件比 window.onload 执行找一点点。一旦页面DOM加载完成， $document.ready 就会被调用。它不会等待images,frame加载完成才调用。

From http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready/18843427#18843427

测试代码如下所示，ready会先行于onload

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>   
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>onload与ready测试</title>
		<style type="text/css">
			
		</style>
		<script type="text/javascript" src="jquery-2.1.4.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				alert('ready');
			});
			
			window.onload=function(){
				alert('load');
			}
			//ready 先行于 onload
		</script>
	</head>
	
	<body>
	</body>
</html>

转载于:https://my.oschina.net/jallenkwong/blog/750128