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) {};
});
网友评论