HTML文档加载事件

浏览器在加载文档的时候会首先触发document对象上的DOMContentLoaded事件，然后是window对象上的load事件，顺序如下：
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、DOM树构建完成。//DOMContentLoaded
5、加载图片等外部文件。
6、页面加载完毕。//load

其实，这里还有一个readystatechange事件。
当document.readyState 为 interactive 的时候，同时会触发DOMContentLoaded。
当document.readyState 为 complete 的时候，同时会触发load。

以后如需判断当前文档是否加载完成，只需要获取document.readyState的值即可。

代码如下：

<script>
        function init(e) {
            console.log(e.type+' : '+document.readyState);
        }
        document.addEventListener('readystatechange',init,false);
        window.addEventListener('load',init,false);
        document.addEventListener('DOMContentLoaded',init,false);
</script>