Dom加载

IE高版本及其他浏览器的加载

1、 处理页面文档加载的时候，我们遇到一个难题，就是使用window.onload 这种将所有内容加载后（包括DOM 文档结构，外部脚本、样式，图片音乐等）这样会导致在长时间加载页面的情况下，JS 程序是不可用的状态。而JS其实只需要HTML DOM 文档结构构造完毕之后就可以使用了，没必要等待诸如图片音乐和外部内容加载。
2、非IE 浏览器提供了一种加载事件：DOMContentLoaded 事件，这个事件可以在完成HTML DOM结构之后就会触发，不会理会图像音乐、JS 文件、CSS文件或其他资源是否已经下载完毕。目前支持DOMContentLoaded 事件浏览器有：IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持。

window.onload

window.onload=function(){
//执行代码
}

DOMContentLoaded

if (document.addEventListener) { //DOM 结构加载完毕
 document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
}

模拟DOMContentLoaded

一个document 的Document.readyState属性描述了文档的加载状态。
一个文档的 readyState 可以是以下之一：
1、loading / 加载
document 仍在加载。
2、interactive / 互动
文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载.
3、complete / 完成
T文档和所有子资源已完成加载。状态表示 load事件即将被触发。 当这个属性的值变化`时，document对象上的readystatechange事件将被触发。

// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
}

// 模拟 load/onload 事件
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
}

问题：在IE 浏览器如果网页上有<iframe>加载另一个网页，我们发现IE浏览器还需要加载完毕iframe 所有的内容才可以执行。而非IE浏览器的DOMContentLoaded事件则还是DOM加载完毕后就执行了，在这里我们就发现IE 的这种方式并不完美，当然，如果页面没有iframe的话就够用了。

解决：在IE中，任何DOM元素都有一个doScroll方法，无论它们是否支持滚动条。为了判断DOM 树是否建成，我们只看看documentElement 是否完整就是，因为，它作为最外层的元素，作为DOM树的根部而存在，如果documentElement完整的话，就可以调用doScroll。当页面一加载JS 时，我们就执行此方法，当然要如果documentElement 还不完整就会报错，我们在catch 块中重新调用它，一直到成功执行，成功执行时就可以调用fn 方
法了
方法了。

//使用doScroll()来判断DOM 加载完毕
var timer = null;
timer = setInterval(function () {
try {
document.documentElement.doScroll('left');
//要执行的内容
fn()
} catch (ex) {};

});

参考资料
DOMContentLoaded
document.onreadystatechange