$(document).ready(function(){...})和$(document).load(function(){...})的区别

1. 概述

大家在敲jQuery代码的时候经常会用到$(document).ready(function(){...})和$(document).load(function(){...})，它们到底有什么区别呢？

2.DOM文档加载的步骤：

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

3.执行顺序

从DOM文档加载的步骤中可以明显的看出，ready在第（4）步完成之后就执行了。但是load要在第（6）步完成之后才执行。
因此ready先执行，load后执行。

4.应用情形

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。
其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready。