jQuery内ready与load事件的区别

jQuery内ready与load事件的区别

     在前面小节中曾经介绍过jQuery定义的ready事件和JavaScript默认的load事件。下面我们来比较这两个事件的区别。为了理解这两个事件的异同，读者应该先了解HTML文档加载的顺序。
DOM文档加载是按顺序执行的，这与浏览器的渲染方式有关系。一般浏览器渲染操作的顺序大致按如下几个步骤来完成。
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。
(5) 加载图片等外部文件。
(6) 页面加载完毕。
具体说明如下。
1. 执行时机
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个页面中包含了大容量的多媒体文件，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。
开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中，由于页面数据没有完全加载进来，导致网页文档呈现和脚本初始化配置不能够保持同步，从而影响了页面的可用性。
而jQuery的ready事件是在DOM结构绘制完毕之后就执行，也就是说它在外部文件加载之前就被执行了，这样就能够确保网页文档的呈现和脚本初始化设置保持同步。

总之，ready事件先于load事件被激活，如果网页文档中没有加载外部文件，则它们的响应时间基本上是相同的。

网上也有这种说法，说是：

一种说法是ready处理函数貌似在文档内容载入完成后执行，无需等待相关其它图片等资源载入完成，所以比load事件要更早执行，对于这点，没有具体证实，

另一种说法是在JQuery中，load是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中可以用$(document).ready()来实现ready事件的调用,通过$(window).load()来实现load事件调用的时机。