学习要点：
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：临时找的网上图片的地址：
<img src="http://h.hiphotos.baidu.com/album/s%3D1600%3Bq%3D100/sign=0686e4a05982b2b7a39f3
dc2019df09e/d01373f082025aaf03cd026ffbedab64024f1a92.jpg" />
//传统的加载方式
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("<script id=\"ie_onload\" defer=\"defer\" src=\"javascript:void(0)\">
<\/script>");
var script = document.getElementById("ie_onload");
script.onreadystatechange = function () {
if (this.readyState=='complete') {
var box = document.getElementById('box');
alert(box.innerHTML);
}
};
PS：这种方式创建空 script 标签，属性拥有 defer，这个属性就是定义需要加载完毕后
执行，然后待 onreadystatechange 为 complete 时，表示 DOM 结构加载完毕了，再执行。
在 IE 浏览器如果网页上有<iframe>加载另一个网页，我们发现 IE 浏览器还需要加载完
毕 iframe 所有的内容才可以执行。而非 IE 浏览器的 DOMContentLoaded 事件则还是 DOM
加载完毕后就执行了，在这里我们就发现IE 的这种方式并不完美，当然，如果页面没有 iframe
的话就够用了。
//使用 doScroll()来判断 DOM 加载完毕
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
var box = document.getElementById('box');
alert(box.innerHTML);
} catch (ex) {};
});
在 IE 中，任何 DOM 元素都有一个 doScroll 方法，无论它们是否支持滚动条。为了判
断 DOM 树是否建成，我们只看看 documentElement 是否完整就是，因为，它作为最外层的
元素，作为 DOM 树的根部而存在，如果 documentElement 完整的话，就可以调用 doScroll
方法了。当页面一加载 JS 时，我们就执行此方法，当然要 如果 documentElement 还不完整
就会报错，我们在 catch 块中重新调用它，一直到成功执行，成功执行时就可以调用 fn 方
法了
由此，我们可以结合一下上面两种方案，做一个兼容的函数方便调用。
function addDomLoaded(fn) {
if (document.addEventListener) { //W3C
addEvent(document, 'DOMContentLoaded', function () {
fn();
removeEvent(document, 'DOMContentLoaded', arguments.callee);
});
}
else { //IE
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
fn();
} catch (ex) {};
});
}
}
addDomLoaded(function () {
var box = document.getElementById('box');
alert(box.innerHTML);
});
网友评论