他们的区别是，触发的时机不一样，先触发 DOMContentLoaded 事件，后触发 load 事件。

DOM 文档加载的步骤为

1. 解析 HTML 结构。

2. 加载外部脚本和样式表文件。

3. 解析并执行脚本代码。

4. DOM 树构建完成。 // DOMContentLoaded

5. 加载图片等外部文件。

6. 页面加载完毕。 // load

在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。

用原生js可以这么写

// 不兼容老的浏览器
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

window.addEventListener("load", function() {
    // ...代码...
}, false);

用jQuery这么写

// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load
$(document).load(function() {
    // ...代码...
});

文／九彩拼盘（简书作者）
原文链接：http://www.jianshu.com/p/d851...
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

至于 $(fucntion(){}) 底层是调用工具方法 jQuery.ready，是因为 jQuery.ready 方法是使用频次最高的方法没有之一，所以特意简化为 $(fucntion(){}) 形式，让第一次接触 jQuery 的同学都能记住它。

onload事件要等到所有页面元素加载完成才会触发,包括页面上的图片等等。如果网页上有大量的图片，效果可想而知，用户可能在没有看到图片的时候，就已经开始操作页面了，而这时我们的页面还没有初始化，事件还没有注册上，这岂不是太晚了！
除了大家熟知的onload事件之外， 与DOM中的onload事件相近的，我们还有 DOMContentLoaded事件可以考虑， 基于标准的浏览器支持这个事件, 当所有DOM 解析完以后会触发这个事件。

这样，对于基于标准的浏览器来说，我们还可以注册这个事件的处理。这样，我们可能更早地捕获到加载完成的事件。

if (document.addEventListener) {
    // Use the handy event callback
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);

    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);

}