JavaScript DOM加载

在我们处理页面加载文档的时候,会遇到这样一个情况:
当我们使用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 id="div">div</div>
<img src="http://h.hiphotos.baidu.com/album/s%3D1600%3Bq%3D100/sign=0686e4a05982b2b7a39f3dc2019df09e/d01373f082025aaf03cd026ffbedab64024f1a92.jpg"></img>

我们有一个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('<script id="ie_loaded" defer="defer" src="javascript:void(0)"></script>');
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部分:

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<div id="div">div</div>
<iframe src="http://www.baidu.com"></iframe>
<img src="http://h.hiphotos.baidu.com/album/s%3D1600%3Bq%3D100/sign=0686e4a05982b2b7a39f3dc2019df09e/d01373f082025aaf03cd026ffbedab64024f1a92.jpg"></img>
<script src="tool-all.js"></script>
<script src="../base.js"></script>
<script src="dome.js"></script> 
</body>
</html>

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);
});

你可能感兴趣的:(JS-DOM加载)