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