IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断

是否构建好DOM树;如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕)。

所以可以采用这种方式:

  

        /**
* 实现DomContentLoaded的兼容性
* @param callback
*/
var onDomContentLoaded = function(callback){
var onlyOnce = true;
var onReady = function(callback){
if(onlyOnce){
onlyOnce = false;
onDomContentLoaded.isDomReady = true;
try{
callback();
}catch(e){
throw(new Error('DOM Ready callback occurs an error!'))
}
}
return;
} if(S.browser.isIe && !('HTMLElement' in window)){ // lt IE9
if(self.top === self){
function s(){
try{
document.documentElement.doScroll('left');
onReady(callback);
return;
}catch(e){
setTimeout(s,50);
}
}
s();
}else{ //包含框架
document.attachEvent('onreadystatechange',function(){
if(document.readyState === 'complete'){
onReady(callback);
document.detachEvent('onreadystatechange',arguments.callee);
}
});
} document.onload = function(){
onReady(callback);
document.onload = null;
};
}else{
document.addEventListener('DOMContentLoaded',function(){
onReady(callback);
document.removeEventListener('DOMContentLoaded',arguments.callee);
},false); document.onload = function(){
onReady(callback);
document.onload = null;
};
}
};

另外,John Resig也在《精通javascript》提出了一种方法来判断DOM是否构建完毕,那就是不断轮训判断

if(document && document.getElementById && document.getElementsByTagName && document.body)是否为true,若为true,则

DOM构建完毕。

最后,给出David Flanagan所给出的whenReady函数,很有技巧性:

  

/*
* Pass a function to whenReady() and it will be invoked (as a method of the
* document) when the document is parsed and ready for manipulation. Registered
* functions are triggered by the first DOMContentLoaded, readystatechange, or
* load event that occurs. Once the document is ready and all functions have
* been invoked, any functions passed to whenReady() will be invoked
* immediately.
*/
var whenReady = (function() { // This function returns the whenReady() function
var funcs = []; // The functions to run when we get an event
var ready = false; // Switches to true when the handler is triggered // The event handler invoked when the document becomes ready
function handler(e) {
// If we've already run once, just return
if (ready) return; // If this was a readystatechange event where the state changed to
// something other than "complete", then we're not ready yet
if (e.type === "readystatechange" && document.readyState !== "complete")
return; // Run all registered functions.
// Note that we look up funcs.length each time, in case calling
// one of these functions causes more functions to be registered.
for(var i = 0; i < funcs.length; i++)
funcs[i].call(document); // Now set the ready flag to true and forget the functions
ready = true;
funcs = null;
} // Register the handler for any event we might receive
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
} // Return the whenReady function
return function whenReady(f) {
if (ready) f.call(document); // If already ready, just run it
else funcs.push(f); // Otherwise, queue it for later.
}
}());

DOMContentLoaded实现的更多相关文章

  1. 谈谈DOMContentLoaded:Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  3. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  4. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. DOMContentLoaded和load

    /* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...

  6. DOMContentLoaded和jquery的ready和window.onload的顺序

    document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...

  7. HTML5中的DOMContentLoaded 和 touchmove

    Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...

  8. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  9. DOMContentLoaded事件

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

随机推荐

  1. iOS 按钮上的标题设置向左向右对齐的方法

    Button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;//左对齐(UIControlContentHo ...

  2. python Django session/cookie

    一, Cookie #cookie # def cook1(request): # print(request.COOKIES) # 查看cooke # # print(request.get_sig ...

  3. 谢欣伦 - OpenDev原创例程 - 网络摄像机WebCamera

    Win7没有预装摄像头软件,打开摄像头通常需要第三方软件来完成.第三方软件,好的要收费,免费的又没几款,其中功能完整的寥寥可数.正好我在做一个数字摄像头视频捕获的功能,经过两周的整理优化,我做了一个简 ...

  4. Silverlight 使用DataContractJsonSerializer序列化与反序列化 Json

    环境说明:Silverlight 5.1,.Net Framework  ​4.0 1.添加引用System.ServiceModel.Web.dll. 因为 System.Runtime.Seria ...

  5. Ajax是如何运行的?

    1.我们需要知道什么是Ajax: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现 ...

  6. serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法

    ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...

  7. SQL Server差异备份的备份/还原原理

    SQL Server差异备份的备份/还原原理 记住一点:差异备份是基于最后一次完整备份的差异,而不是基于最后一次差异的差异   备份过程: 1-完整备份之后有无对数据库做过修改,如果有,记录数据库的最 ...

  8. node基本理念(事件、多线程、进程)

    关于node的几点理解: 1.所谓的node单线程,是指node的event loop,也就是我们的业务脚本是跑在一个单线程中的,可以理解为主线程: 2.若存在IO操作,例如文件.网络,是单独在线程里 ...

  9. 剑指Offer面试题:19.包含Min函数的栈

    一.题目:包含Min函数的栈 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). 这里我们要实现的就是min ...

  10. Android学习——第一个NDK程序

    在前面的学习中,我们已经讲解了关于NDK编程的环境搭建流程,简单的使用我们也通过官网本身自带的例子进行说明了.可是相信大家一定还存在这么的一个疑惑:“如果我要自己利用NDK编写一个Android应用, ...