JavaScript DOM加载

来源：互联网发布：运动装休闲装知乎编辑：程序博客网时间：2024/06/05 03:42

在我们处理页面加载文档的时候，会遇到这样一个情况：
当我们使用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);});

0 0