好久没写文章了，再来一波，首先上图：
参考链接：onload与ready的区别
详见浏览器工作原理：浏览器工作原理
前言
页面加载完成有两种事件：
一是ready，表示文档结构（DOM结构）已经加载完成（不包含图片等非文字媒体文件），
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)
我的理解： 一般样式控制的，比如图片大小控制放在onload 里面加载;而：jS事件触发的方法，可以在ready 里面加载;
$(function(){
// do something
});
其实这个就是jq ready()的简写，他等价于：
$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})
body的onload事件与$(document).ready相比
加载多函数问题
<body onload="a();b();">
</body>
原生javascript中函数没有重载，所以会实现覆盖
a)body中声明的onload事件（DOM0级别）会被后面的window.onlad()（DOM0级别）覆盖
<body onload="a();b()">
</body>
<script>
window.onload = function(){alert('world');}
</script>
b)只能在body中的onload中实现多函数执行
<body onload="a();b()">
</body>
<srcipt>
function a(){alert('a');}
function b(){alert('b');}
</script>
c)多个window.load()会覆盖（如a）实例）
window.onload = function(){alert('hello');}
window.onload = function(){alert('world');}
在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行
代码和内容分离问题
body中的onload不分离
而window.onload()分离以及$(document),ready()可以分离
执行先后顺序不同（最大区别）
$(document).ready()：在DOM结构加载完毕之后执行window.onload：在所有的文件加载完毕之后执行
$(document).ready():最大的区别是DOM加载完毕之后，不必再去等图片（异步）加载完毕后执行js代码
window.onload用法
<script type='text/javascript'>
function winready(){
document.getElementByIdx_x.('load').style.display='none';
}
window.onload=winready; //或者window.onload=function(){winready();}
</scritp>
jquery用法:
<script type='text/javascript'>
$(document).ready(function(){
$('#load').css('display','none');
})
</script>
$(window).load()
使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
以下内容会在页面所有内容加载完成后按先后顺序依次执行.
<script type="text/JavaScript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>
与之对应的unload事件（会在页面关闭时候执行）
$(window).unload(function() {
alert("good bye");
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。