无标题文章

在我们处理页面加载文档的时候，会遇到这样一个情况：
当我们使用window.onload的时候，我们的js代码只有在所有内容加载完毕后才能执行。
这里的要加载的所有内容包含以下几个：
1.HTML解析
2.外部样式和脚本的加载
3.脚本在文档内解析并执行
4.HTML DOM被构造出来
5.图片和外部内容
其中，1-4点在瞬间就可以完成，而第5点会因为图片或者外部内容的大小而加载的事件不同，
但总的来说，第5点加载的时间比前四点加载的累积时间还要多。
而我们的JS文件并不需要等图片和外部内容加载完毕后再加载，
我们完全可以在HTML DOM被构造出来之后加载JS文件。
在W3C中，document对象为我们提供了DOMContentLoaded事件来解决这一问题
我们先不着急用W3C的DOMContentLoaded事件，我们先看看传统的加载
先看看我们的html部分：

div

我们有一个div和一张很大的图片（加载时会消耗一定的时间，用于测试）
传统的方法加载：

window.onload = function () {
    alert(document.getElementById("div").innerHTML);
}
// 当我们清除了缓存刷新时，我们会发现当图片完全加载完毕后，才加载JS脚本，即弹出div的innerHTML

现代事件绑定的方式

addEvent(document, 'DOMContentLoaded', function () {
    alert(document.getElementById("div").innerHTML);
});
// 我们会发现，先加载JS脚本，然后缓缓加载图片。即DOM 文档树被加载完毕后，JS文件就可以加载了

但是IE678并不支持DOMContentLoaded事件，我们需要模仿

document.write('');
var script = document.getElementById("ie_loaded");
script.onreadystatechange = function () {
    if (this.readyState === 'complete') {
        alert(document.getElementById("div").innerHTML);
    }
}
// 当DOM文档树被加载完成，即onreadystatechange === 'complete'时，弹出div的innerHTML

但是，如果有iframe标签时，JS文件会在iframe加载完毕后加载
现在我们来看看ie的一个特征：
在ie中，任何的DOM都一个doScroll方法，它表示是否可以支持滚动条。而当DOM文档加载完毕之后，
documentElement就可以调用doScroll方法。也就是说：如果DOM文档没有加载不完整，就不能调用doScroll方法

var timer = null;
timer.setInterval(function () {
    try {
        document.documentElement.doScroll("left");
        alert(document.getElementById("div").innerHTML);
    } catch (ex) {};
});

接下来，我们就可以跨浏览器DOM加载了
跨浏览器DOM加载
兼容浏览器有：IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+和IE678
由于FF2和opera8等浏览器在我们使用时就已经退出了历史舞台，因此这里不再考虑
下面是完整的代码
html部分：

div




 

js部分：

// 跨浏览器DOM加载
function addDomLoaded (fn) {
    if (document.addEventListener) {    // W3C
        document.addEventListener("DOMContentLoaded", function () {
            fn();
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
        }, false);
    } else {
        var timer = null;
        timer = setInterval(function () {
            try {
                document.documentElement.doScroll("left");
                fn();
            } catch (ex) {};
        });
    }
}
// 调用
addDomLoaded(function () {
    alert(document.getElementById("div").innerHTML);
});