DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看。里面里面定义了addDOMLoadEvent。这是干什么用的?
仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过。 if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
好久就是为了兼容实现DOMContentLoaded事件。
网上找了点有关DOMContentLoaded的资料拿来看看。
DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
如果页面的图片很多的话,
从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢(
见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。
目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.
在项目中, 我使用了Prototype工具, 以往调用初始化的方法是:
"load", init);
现在有了DOMContentLoaded, 可以替换成如下的方法:
init);
最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.
init);
附:
Andrea Giammarchi
的OnContent函数提供了一个跨平台的DOMContentLoaded的解决方案My DOMContentLoaded
Final Solution
function onContent ( f ) {
var a = onContent,
b = navigator . userAgent ,
d = document ,
w = window ,
c = "onContent" ,
e = "addEventListener" ,
o = "opera" ,
r = "readyState" ,
s = "<scr" . concat ( "ipt defer src='//:' on" ,
r, "change='if(this." ,
r, "==\"complete\"){this.parentNode.removeChild(this);"
, c, "." , c, "()}'></scr" , "ipt>" ) ;
a[ c] = ( function ( o) {
return function ( ) {
a[ c] = function ( ) { } ;
for ( a = arguments . callee ; ! a. done; a. done = 1) f( o ? o( ) : o)
}
} ) ( a[ c] ) ;
if ( d[ e ] ) d[ e ] ( "DOMContentLoaded" , a[ c] , false ) ;
if ( / WebKit| Khtml/ i. test ( b) | | ( w[ o] & & parseInt ( w[ o] . version ( ) ) < 9) ) ( function ( ) { / loaded | complete / . test ( d[ r] ) ? a[ c] ( ) : setTimeout ( arguments . callee , 1)
} ) ( ) ;
else if ( / MSIE/ i. test ( b) ) d. write ( s) ;
- } ;
util.js:
addDOMLoadEvent = (function(){
// create event function
stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done =
true;
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were
added
while (exec =
load_events.shift())
setTimeout(exec,
10);
if (script) script.onreadystatechange =
'';
};
return function (func) {
// if the init
function was already ran, just run this function now and stop
if (done) return func();
if (!load_events[0]) {
// for
Mozilla/Opera9
if
(document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*@cc_on @*/
/*@if
(@_win32)
document.write("<script id=__ie_onload
defer src=//0><\/scr"+"ipt>");
script =
document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if
(this.readyState == "complete")
init(); //
call the onload handler
};
/*@end @*/
// for Safari
if
(/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if
(/loaded|complete/.test(document.readyState))
init(); // call the onload handler
},
10);
}
// for other browsers set the window.onload, but also
execute the old window.onload
old_onload =
window.onload;
window.onload = function() {
init();
if (old_onload)
old_onload();
};
}
load_events.push(func);
}
})();
function insertWBR(string, step){
var textarea =
document.createElement('TEXTAREA');
textarea.innerHTML =
string.replace(/</g,"<").replace(/>/g,">");
string =
textarea.value;
var step = (step || 5), reg = new RegExp("(\\S {" + step + "})",
"gi");
return
string.replace(/(<[^>]+>)/gi,"$1<wbr/>").replace(/(>|^)([^<]+)(<|$)/gi,
function(a,b,c,d){
if(c.length < step) return a;
return
b + c.replace(reg, "$1<wbr/>") + d;
});
}
DOMContentLoaded事件的更多相关文章
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- 模拟DOMContentLoaded事件
window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- HTML5-常见的事件- DOMContentLoaded事件
一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- DOMContentLoaded事件中使用异步
概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...
- JS、CSS以及img对DOMContentLoaded事件的影响
最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...
- load/domContentLoaded事件、异步/延迟Js 与DOM解析
一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...
- 深入理解Javascript封装DOMContentLoaded事件
最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...
随机推荐
- converntion
One convention that we have is to use the names of fruits and vegetables for variables(only in small ...
- 定制CentOS (Redhat AS 5.1)安装盘
CentOS(Redhat)提供了一套完整的自动化安装机制,利用该机制,我们可以自己定制无人值守的自动安装光盘,也可以进行系统裁减,甚至可以以CentOS为基础制作自己软件系统的系统安装盘.以下全部内 ...
- 把Message转换成String
把Message转换成String注意,这里欠缺CM消息和CN消息,因为它们不是系统消息,不经过Dispatch API转发,但是可以把它们写在WndProc里,这样SendMessage送来的消息也 ...
- Clearing Floats清除浮动--clearfix的不同方法的使用概述
清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...
- Linux系统文件的隐藏属性
linux系统的文件除了有普通rwx权限外还有一种隐藏权限,例如明明有权限删除某个文件却报错了. 或者仅能为某个文件追加内容而不能减少内容,遇到这种很‘奇怪’的文件,就要怀疑是文件被设置隐藏权限了. ...
- ubuntu安装postgresql与postgis
版本信息 ubuntu 14.04.1LTS postgresql 9.3.5 postgis 2.1.2 今天尝试着安装了postgis 2.1.2,(较简便的包安装,不是源码 ...
- Backbone seajs demo2
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JAVA多线程下载网络文件
JAVA多线程下载网络文件,开启多个线程,同时下载网络文件. 源码如下:(点击下载 MultiThreadDownload.java) import java.io.InputStream; im ...
- Mac 版 QQ 可直接访问 iPhone 的相册 ?!
在QQ的聊天窗口中,点击 发送图片 的按钮,会有两个选择项,其中一个就是 从iPhone相册中选取 ,如图 点击 从iPhone相册中选取 后,iPhone上的QQ会收到一条消息 “请选择要上传的照 ...
- [Golang]实习最后一天小纪念+并发爬虫小练习
今天是我在公司实习的最后一天,一个月的时间真的是太短暂了,我非常享受在公司工作的这一个月,在这里Leader和同事们对我的帮助极大地促进了我技术水平的进步和自信心的提升,我发自内心地感谢白山云科技给我 ...