今天查看百度空间源代码,发现多了个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工具, 以往调用初始化的方法是:

Event.observe(window,
"load", init);

现在有了DOMContentLoaded, 可以替换成如下的方法:

document.observe('contentloaded',
init);

最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.

document.observe('dom:loaded',
init);

附:
   Andrea Giammarchi
的OnContent函数提供了一个跨平台的DOMContentLoaded的解决方案My DOMContentLoaded
Final Solution

文件名称:DOMContentLoaded.js

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

  1. } ;

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,"&lt;").replace(/>/g,"&gt;");
    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事件的更多相关文章

  1. Window.onLoad 和 DOMContentLoaded事件的先后顺序

    相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...

  2. 模拟DOMContentLoaded事件

    window.onload事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析 ...

  3. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  4. HTML5-常见的事件- DOMContentLoaded事件

    一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则 ...

  5. HTML load事件和DOMCOntentLoaded事件

    JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行”   普通script标签会阻塞DOM的解析 DOMcontentLoa ...

  6. DOMContentLoaded事件中使用异步

    概述 我在之前的博文(Performance面板看js加载)中提到过,如果利用监听DOMContentLoaded事件的方式来加载js是不能优化加载的,不能够替代jquery中的ready方法,原因是 ...

  7. JS、CSS以及img对DOMContentLoaded事件的影响

    最近在做性能有关的数据上报,发现了两个非常有意思的东西:Chrome开发者工具的Timeline分析面板,以及DOMContentLoaded事件.一个是强大的令人发指的性能分析工具,一个是重要的性能 ...

  8. load/domContentLoaded事件、异步/延迟Js 与DOM解析

    一.DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件,mdn对于它们是这样描述的: DOMContentLoaded mdn文档地址:https: ...

  9. 深入理解Javascript封装DOMContentLoaded事件

    最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加w ...

随机推荐

  1. React-非dom属性-dangerouslySetInnerHTML标签

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. android+apimonitor+genymotion

    1. 安装genymotion: http://www.genymotion.net/ 2. 设置使用adb Setting--adb--选择sdk的目录 3. apimonitor https:// ...

  3. 研究CPU的好文章以及博客

    留个爪,有空仔细看: http://blog.csdn.net/zhangxinrun/article/details/6918862 http://blog.csdn.net/gaijf/artic ...

  4. [iOS]ios archives 出现的是other items而不是iOS Apps的解决方案

    百度了一上午, 总是这样子. (利用cocoapods上传项目的时候, 总是这样无法点击UpLoad to App Store) 然后. 这样做. 就可以了!

  5. java socket 单服务器多客户端实时通信

    想用JAVA做一个服务器,请问怎么利用TCP和线程,实现多个客户端同时在线,能与服务器进行交互? 服务器监听端口 做个无限循环 接到一个连接就创建一个通道线程,并将通道线程存储到一个list集合中 1 ...

  6. Html 全屏切换效果

    来源 http://www.imooc.com/learn/374 pageswitch.js (function ($) { var defaults = { 'container': '#cont ...

  7. Android应用开发学习笔记之事件处理

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Android提供的事件处理机制分为两类:一是基于监听的事件处理:二是基于回调的事件处理.对于基于监听的事件处理,主 ...

  8. 生成24位字符串ID__IdGenerator.java

    此工具类用于生成24位字符串ID,唯一不重复.直接通过 IdGenerator.get() 获取. 源码如下:(点击下载源码 - IdGenerator.java ) import java.net. ...

  9. matlab函数集锦

    matlab函数集锦 matlab函数集锦ISFINITE(X), ISINF(X), or ISNAN(X)pwd 当前目录eval 执行matlab函数CONV2(  ,'same')  卷积F  ...

  10. find-all-anagrams-in-a-string

    https://leetcode.com/problems/find-all-anagrams-in-a-string/ package com.company; import java.util.A ...