事件DOMContentLoaded和load的区别

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

        DOM文档加载的步骤为：

        1.解析HTML结构。

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

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

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

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

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

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

        用原生js可以这么写：

// 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

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

        用jQuery这么写

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

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

        总之，load事件：页面资源全部载入（JS，CSS，图片等全部加载完）触发；ready事件：原生无ready事件，只有DOMContentLoaded事件。jQuery中的ready事件当DOM加载完成触发，此时引用的资源未必已加载完成。所以，ready事件总是先于load事件触发。