参考答案

定义

再说两者之前先简单说明一下window与document的区别：

  • window
    1. window对象表示浏览器中打开的窗口。
    2. window对象可以省略，如:window.console.log()等价于console.log()
  • document
    1. document对象是window对象的一部分,如：document.body 等价于 window.document.body
    2. 浏览器的html文档成为document对象

$(document).ready()

从字面的意思上理解，就是文档准备好了，也就是浏览器已经加载并解析完整个html文档，DOM树已经建立起来了,然后执行此函数。

原生的JavaScript写法如下：

document.ready=function(){
 alert("ready"); 
}

jQuery中的写法如下：

$(document).ready(function(){
 alert("ready");
});
//或者简写为
$(function(){
 alert("ready");
});

$(window).load

在网页中所有元素(包括页面中图片、css文件等所有关联文件)完全加载到浏览器后才执行。

原生JavaScript中的写法如下

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

jQuery中的写法如下：

$(window).load(function(){
 alert("onload");
});

ready与load执行顺序

先来看一下DOM文档加载的步骤：

    1.解析HTML结构
    2.加载外部脚本和样式表文件
    3.解析并执行脚本代码
    4.构造HTML DOM模型 //ready
    5.加载图片等外部文件
    6.页面加载完毕 //load

从上面的步骤中可以看出，ready在第4步完成之后就执行了，但是load要在第6步完成之后才执行。

两者区别

1.执行时间

  • $(window).load()必须等到页面内包括图片的所有元素加载完毕后才能执行（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。
  • $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。但这并不代表页面的所有数据已经全部加载完成，一些大的图片有会在建立DOM树之后很长一段时间才行加载完成

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript为DOM元素添加事件。在常规的Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready()方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

2.编写个数不同

  • $(window).load不能同时编写多个，如果有多个$(window).load()，那么只有最后一个$(window).load()里面的函数或者代码才会执行，之前的$(window).load()都将被覆盖。
  • $(document).ready()可以同时编写多个，并且都可以得到执行。

示例如下：

以下代码无法正确执行,结果只输出第二个,:

$(window).load(function(){ 
    alert(“text1”); 
}); 
$(window).load(function(){ 
    alert(“text2”); 
});

$(document).ready()能同时编写多个,以下代码正确执行，结果两次都输出：

$(document).ready(function(){ 
    alert(“Hello World”); 
}); 
$(document).ready(function(){ 
    alert(“Hello again”); 
});

3.简化写法

  • $(window).load没有简化写法
  • $(document).ready(function(){})可以简写成$(function(){})或者$().ready(function(){})

4.执行的效率不同

  • 如要在dom的元素节点中添加onclick属性节点，这时用$(document).ready()就要比用$(window).load()的效率高
  • 但是在某些时候还必须得用$(window).load()才行，比如按钮图片出现后添加事件