jquery load 和 ready 的区别

本文参考：区别、区别详解
如有侵权，请联系删除！本文仅用于学习记录！

执行时机

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

=> ready先执行，load后执行。

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

区分

1. 时机：页面没有很多媒体文件例如图片、视频等等，ready 与 load 差不多。
   ready 的时候已经有了基本的 DOM 结构，所以这个时候就可以写一些代码了。如果网页资源加载慢，会导致 load 很慢才触发，体验不好。所以多直接用 ready 函数。
2. 次数：load 只运行一次，如果有第二次定义，会覆盖之前的定义；ready 可以运行多次, 多个添加 ready 都会执行，顺序执行。无论是否在同一元素上注册ready事件，都是按照注册的先后顺序执行。
   写法如下：

window.onload = function (){}  // load
$(window).load(fn) // load
$(document).ready()  // ready
$(function (){ // ready
});

3. 对象：
   load: window ，带有 url 资源的元素（img, script, iframe, video, audio ) ，例如 $('img').load(fn)
   ready: 可以加在任意元素上， 例如$('div').ready(fn) .

4. 兼容性:
   load: 兼容性较差，非必要情况，不使用load 事件
   ready: 兼容性好，且安全

5. 冲突： ready事件 与 window.onload(或)是冲突的，如果使用了 window.onload(或)，将导致ready事件不执行。