DOMContentLoaded实现
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实现的更多相关文章
- 谈谈DOMContentLoaded:Javascript中的domReady引入机制
一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...
- 事件DOMContentLoaded和load的区别
1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- window.onload、DOMContentLoaded和$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- DOMContentLoaded和load
/* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...
- DOMContentLoaded和jquery的ready和window.onload的顺序
document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...
- HTML5中的DOMContentLoaded 和 touchmove
Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...
- 利用doScroll在IE浏览器里模仿DOMContentLoaded
稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...
- DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...
随机推荐
- iOS 按钮上的标题设置向左向右对齐的方法
Button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;//左对齐(UIControlContentHo ...
- python Django session/cookie
一, Cookie #cookie # def cook1(request): # print(request.COOKIES) # 查看cooke # # print(request.get_sig ...
- 谢欣伦 - OpenDev原创例程 - 网络摄像机WebCamera
Win7没有预装摄像头软件,打开摄像头通常需要第三方软件来完成.第三方软件,好的要收费,免费的又没几款,其中功能完整的寥寥可数.正好我在做一个数字摄像头视频捕获的功能,经过两周的整理优化,我做了一个简 ...
- Silverlight 使用DataContractJsonSerializer序列化与反序列化 Json
环境说明:Silverlight 5.1,.Net Framework 4.0 1.添加引用System.ServiceModel.Web.dll. 因为 System.Runtime.Seria ...
- Ajax是如何运行的?
1.我们需要知道什么是Ajax: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现 ...
- serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法
ObjectInputStream与ObjectOutputStream类所读写的对象必须实现Serializable接口,对象中的transient和static类型成员变量不会被读取和写入 Ser ...
- SQL Server差异备份的备份/还原原理
SQL Server差异备份的备份/还原原理 记住一点:差异备份是基于最后一次完整备份的差异,而不是基于最后一次差异的差异 备份过程: 1-完整备份之后有无对数据库做过修改,如果有,记录数据库的最 ...
- node基本理念(事件、多线程、进程)
关于node的几点理解: 1.所谓的node单线程,是指node的event loop,也就是我们的业务脚本是跑在一个单线程中的,可以理解为主线程: 2.若存在IO操作,例如文件.网络,是单独在线程里 ...
- 剑指Offer面试题:19.包含Min函数的栈
一.题目:包含Min函数的栈 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). 这里我们要实现的就是min ...
- Android学习——第一个NDK程序
在前面的学习中,我们已经讲解了关于NDK编程的环境搭建流程,简单的使用我们也通过官网本身自带的例子进行说明了.可是相信大家一定还存在这么的一个疑惑:“如果我要自己利用NDK编写一个Android应用, ...