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 ...
随机推荐
- redis系列之redis是什么
一.简介 REmote DIctionary Server(Redis),redis是一个基于内存的单机key/value系统,类似memcached,但支持value为多种形式,包括:字符串(str ...
- 10 signs you’re dating the wrong person
10 signs you’re dating the wrong person10个迹象表明TA不是你的真心人 Do you have any exes who were so awful ...
- iOS开发--轮播图
在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,笔者根据自己的思路,用两个imageView也实现了图片轮播,这里说说笔者的主要思路以及大概步骤,具体代码请看这里, ...
- 8天学通MongoDB
随笔分类 - MongoDB 双十一来了,别让你的mongodb宕机了 摘要: 好久没过来吹牛了,前段时间一直赶项目,没有时间来更新博客,项目也终于赶完了,接下来就要面临双十一这场惊心动魄的处女秀考验 ...
- MimeTypes list
application/acad *.dwg AutoCAD-Dateien (nach NCSA) application/applefile AppleFile-Dateien applicati ...
- 使用qmake生成Makefile
Qmake自动生成Makefile 手动写Makefile是一件痛苦的事情,稍不小心就会出错,不过qmake可以让你脱离苦海 qmake可以根据你提供的.pro文件,生成Makefile不过他可比Ma ...
- jdbc框架 commons-dbutils的使用
commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序 ...
- dd命令刻录u盘启动盘
dd命令来刻录windows启动盘 dd if=/ home/avi/Downloads/Win10_English_x64.iso of=/ dev/sdb1 bs=51M; sync dd命令详解 ...
- java中参数传递
一.参数是基本类型 相当于C++传值调用,方法中的形参是实参的副本. 二.参数是类类型 类类型的参数在方法调用中,相当于C++中的传址调用.形参是实参引用同一个对象.所有形参修改则实参也修改了 三.总 ...
- TCSRM5961000
一直没想到怎么去重 看了眼别人的代码...so easy啊 同余啊 唉..脑子被僵尸吃掉了 难得1000出个简单的 #include <iostream> #include<cstd ...