页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
ready事件在DOM结构绘制完成之后就会执行，这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行
。
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发
。
ready与load谁先执行？面试时经常会被问到这个问题：ready与load那一个先执行，那一个后执行？答案当然是ready先执行。
1、Dom Ready
使用jQuery时一般都是这么开始写脚本的：
$(function(){
// do something
//$(function()){}是jQuery的方法，等价于$(document).ready(function(){}))
//$(document).ready(function(){})；$().ready(function(){})；和$(function(){})三者都是一样的，
//最完整的写法是：$(document).ready(function(){})，ready()函数仅能用于当前文档，因此无需选择器。
//所以document选择器可以不要，那么就可以写成：$().ready(function(){})
//最后$的默认事件就是ready，所以，ready也可以省略，写成：$(function(){});
$(function() {
$("a").click(function() {
alert("Hello world!");
这个例子就是给所有的a标签绑定了一个click事件。即当所有链接被鼠标单击的时候，都执行 alert(“Hello World!”)，也就是说页面加载时绑定，真正该触发时触发。
Dom Ready的意义是：在Dom节点创建完成后执行。通常一个页面加载的顺序是，域名解析——加载html——加载js和css——加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间。
2、Dom Load
用原生的js的时候我们通常用onload事件来做一些事情，比如：
window.onload=function(){
document.getElementById("imgID").onload=function(){
Dom Load的意义是：在页面所有资源加载完后执行，document文档包括了加载图片等其他信息。那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后。
3、window.onload与$(function(){})的区别
在某HTML页面内运行以下测试代码：
<script type="text/javascript">
$(function () {
console.log("ready执行");
$(function() {
console.log("ready1执行");
window.onload = function () {
console.log('load执行');
window.onload = function () {
console.log('load1执行');
</script>
运行结果如下图所示：
结果表明了以下三点：
1、$(function(){})：在Dom节点创建完成后就执行，如果有多个定义则依次执行。
2、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个。
3、$(function(){})在window.onload前执行。
用一例子来通俗地解释：比如，页面中只有一个img标签，加载页面时，window.οnlοad=function(){}中的代码要等图片完全显示出来之后才执行（假设其他代码都在图片显示之前加载完了）；而 $(function(){ }) 等<img/>标签加载完就执行了，这时候图片可能还没有显示出来。
DOM文档加载步骤：
1、解析HTML结构
2、加载外部的脚本和样式文件
3、解析并执行脚本代码
4、执行$(function(){})内对应代码
5、加载图片等二进制资源
6、页面加载完毕，执行window.onload
4、(function($) {…})(jQuery)写法
(function(){…})表示一个匿名函数。function(arg){…}定义了一个参数为arg的匿名函数，然后使用(function(arg){…})(param)来调用这个匿名函数。其中param是传入这个匿名函数的参数。
这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数。而(function($){…})(jQuery)则是一样的，之所以只在形参上使用美元符号，是为了不与其他库冲突，所以实参用jQuery。相当于：
funtion output(s){…};
output(jQuery);
var fn = function(s){…};
fn(jQuery);
需要注意的是与$(function(){})的区别，后者用来在DOM加载完成之后执行一系列预先定义好的函数。
这种写法的最大好处是形成闭包。在(function($) {…})(jQuery)在内部定义的函数和变量只能在此范围内有效。比如：
var i=3;
function init(){
alert("外层init："+i);
(function($) {
var i=2;
function init(){
alert("内层init："+i);
init();
})(jQuery);
init();
执行结果：
内层init：2
外层init：3
<br />页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页
面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)<br />我的理解：
一般样式控制的，比如图片大小控制放在onload 里面加载;<br />
而：jS事件触发的方法，可以在ready 里面加载;<br /><br /><br />
用jQ的人很多人都是这么开始写脚本的：<br />
浏览器打开
刚写js的时候， 我喜欢用window.onload(); 有一次被人家说这是很土鳖的写法，哈哈 。当时没理他 ，心里暗骂；
最近偶尔看到一个文章，提到window.onload()是土鳖写法，呵呵^_^ 我决定，记录一下， 证实一下这样写确实很土鳖！
window.onload()是在dom文档树和所有文件都加载完才执行， 包括图片这些资源。是不是很墨迹?
而在jquery里， 我们可以看
浏览器打开
以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。
w...
浏览器打开
JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的，可以先去理解下DOM在另一篇文章中:https://blog.csdn.net/daponi/article/details/94597948
1.执行时间
在一般...
浏览器打开
转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：https://blog.csdn.net/pcaxb/article/details/100661841
JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body onload="">）
1.原生window...
浏览器打开
这两个函数的差别就在于调用的时机不同，一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。在日常开发中我们经常需要获取页面的元素进行操作，而在编写代码的时候为了代码易读性我们会将js代码放在一起引入页面中，这就导致js引擎编译代码时可能会出现一些错误，如方法、变量未定义等，这是因为当操作页面DOM元素的js代码执行时，页面中相应的DOM元素还没有渲染，所...
浏览器打开
在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready
浏览器打开
