document.ready和window.onload的区别讲解

结论：

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

window.onload

load事件通常用于检测文档内容或者图片是否加载完毕。

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

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

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

window.onload是一个事件，当文档内容完全加载完成会触发该事件。

可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

为window.onload事件绑定事件处理函数。

绑定匿名函数

window.onload=function(){
 document.getElementById("bg").style.backgroundColor="#F90";
}

绑定具名函数

window.onload=function myalert(){
  alert("绑定成功！");
}

注意：不能绑定多个事件处理函数，最后一个会覆盖所有函数。

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

document.ready

在文档加载后激活函数

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

定义和用法：当DOM已经加载，并且页面（包括图像）已经完全呈现时会发生ready事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

不同点：

1、执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2、编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

 window.onload = function(){
      alert("text1");
   };
   window.onload= fuction(){
      alert("text2");
   };

结果只能输出第二个，不能输出第一个，第一个被第二个覆盖。

 $(document).ready(function(){
      alert("text1");
   };
 $(document).readyfuction(){
      alert("text2");
   };

两个都能正确输出。