18.项目 1-博客前端：封装库--DOM 加载[上]

学习要点：
1.问题所在
2.设置代码

处理页面文档加载的时候，我们遇到一个难题，就是使用 window.onload 这种将所有内
容加载后（包括 DOM 文档结构，外部脚本、样式，图片音乐等）这样会导致在长时间加载
页面的情况下，JS 程序是不可用的状态。而 JS 其实只需要 HTML DOM 文档结构构造完毕
之后就可以使用了，没必要等待诸如图片音乐和外部内容加载。

一．问题所在

首先了解一下浏览器加载的顺序：

1.HTML 解析完毕；

2.外部脚本和样式加载完毕；

3.脚本在文档内解析并执行；

4.HTML DOM 完全构造起来；

5.图片和外部内容加载；

6.网页完成加载。

PS：这里要了解一个问题，1-4 的加载是极快的，一刹那而已。而第 5 条，根据网速和
内容的多少各有快慢，但总体上如果有图片和外部内容的话，比 1-4 条加起来都要慢很多。
PS：并且 JS 的 document.getElementById 这些只需要 1-4 条加载完毕后方可执行，并不
需要加载第 5 条，所以，我们需要一种可以代替 window.onload 的更加快捷的加载方案。

二．设置代码

非 IE 浏览器提供了一种加载事件：DOMContentLoaded 事件，这个事件可以在完成
HTML DOM 结构之后就会触发，不会理会图像音乐、JS 文件、CSS 文件或其他资源是否已
经下载完毕。
目前支持 DOMContentLoaded 事件浏览器有：IE9+、Firefox、Chrome、Safari 3.1+和
Opera 9+都支持。
PS：临时找的网上图片的地址：

//传统的加载方式
window.onload = function () { //等待网页完全加载完毕
var box = document.getElementById('box');
alert(box.innerHTML);
};
//DOMContentLoaded 事件加载
if (document.addEventListener) { //DOM 结构加载完毕
addEvent(document, 'DOMContentLoaded', function () {
var box = document.getElementById('box');
alert(box.innerHTML);
});
}
//IE 浏览器加载
document.write("