今天查看百度空间源代码,发现多了个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
  1. function onContent(f){
  2. var a = onContent,
  3. b = navigator.userAgent,
  4. d = document,
  5. w = window,
  6. c = "onContent",
  7. e = "addEventListener",
  8. o = "opera",
  9. r = "readyState",
  10. s = "<scr".concat("ipt defer src='//:' on", r, "change='if(this.", r, "==\"complete\"){this.parentNode.removeChild(this);", c, ".", c, "()}'></scr", "ipt>");
  11. a[c] = (function(o) {
  12. return function() {
  13. a[c] = function() {};
  14. for (a = arguments.callee; ! a.done; a.done = 1) f(o ? o() : o)
  15. }
  16. })(a[c]);
  17. if (d[e]) d[e]("DOMContentLoaded", a[c], false);
  18. 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)
  19. })();
  20. else if (/MSIE/i.test(b)) d.write(s);
  21. };

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

来自: http://hi.baidu.com/xletian/blog/item/ba99243887b22a20b9998f7d.html

转载于:https://www.cnblogs.com/shikyoh/archive/2011/05/17/2048682.html

DOMContentLoaded事件相关推荐

  1. 主流框架中DOMContentLoaded事件的实现

    来自于:http://varnow.org/?p=77 在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload ...

  2. 浅谈DOMContentLoaded事件及其封装方法

    我们在开发时,经常需要检测页面是否加载完毕,以确保脚本安全运行,下面我们就来浅谈一下检测页面是否加载完毕的那些事件们. 1. onload 事件 在页面的所有资源加载完成时,window对象上会触发一 ...

  3. onload和DOMContentLoaded事件

    1. onload 事件 ​在页面的所有资源加载完成时,window对象上会触发一个onload事件.此时页面的DOM树已经构建完成,并且完成了所有图片.样式表.脚本等资源也已经加载完成.但是存在的问 ...

  4. onload事件和DOMContentLoaded事件

    onload事件和DOMContentLoaded事件 onload事件:等待页面所有资源(包括dom树,图片,第三方框架)加载完毕,再执行代码 DOMContentLoaded事件:等待页面dom树 ...

  5. domContentLoaded事件和onload事件

    //onload事件 是所有标签 图片 样式 及脚本加载完成时触发 window.onload=function(){var span=document.querySelector("spa ...

  6. window的onload事件和domcontentloaded

    window的onload事件和domcontentloaded window.onload: 当一个资源及其依赖资源已完成加载时,将触发onload事件. <!DOCTYPE html> ...

  7. DOMContentLoaded 与onload区别以及使用

    一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完 ...

  8. alert 返回页面 刷新_详解 HTML 页面原生的生命周期事件

    DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...

  9. 21 window对象常见事件

    技术交流QQ群:1027579432,欢迎你的加入! 1.window对象的常见事件 窗口加载事件: window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像.J ...

最新文章

  1. 让你工作变得更加有趣
  2. Openldap配置TLS加密传输(完整版——shell脚本实现[即在客户端执行代码,即可实现TLS加密])
  3. 理解 __doPostBack(转)
  4. 关于ABAP高级顾问应该掌握的技术
  5. 【BZOJ3866】The Romantic Hero DP
  6. android4.0 菜单,三大主流安卓4.0界面解析 MIUI最实用
  7. MFC1、动态创建CButton
  8. python显示图片_python 一个figure上显示多个图像的实例
  9. 《程序化广告实战》一 导读
  10. 在服务器应用虚拟化中发现价值
  11. 微软运行库合集 |VC9、VC11、VC14、VC15库 32位 64位|v2019.3.2(3264位)最新版 phpstudy vc9-vc14运行库
  12. 【翻译】 Unity3D VR 教程:1.VR概述
  13. 【转】个性化二级域名Nginx配置
  14. lending club 贷款逾期分析
  15. 微信SVG使用指南 01
  16. 【json】json文件中文乱码
  17. 修复iPhone8白屏的3种方法,可保留设备数据
  18. python将房贷数据写进excel表格
  19. 拿番茄炒鸡蛋来讲解一下大数据项目的流程
  20. 易语言让按钮支持回车键操作

热门文章

  1. 环形链表得golang实现
  2. 【火炉炼AI】机器学习040-NLP性别判断分类器
  3. 《Redis实战》一1.2 Redis数据结构简介
  4. 文件对比工具比较会话时查看字节地址的方法
  5. Linux Curl命令实用参数
  6. 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航
  7. zabbix 接触这段时间的感悟
  8. OOP 术语:Arguments(参量)和 Parameters(参数)的区别(转载)
  9. Linux 命令(96)—— ln 命令
  10. List、Map、Set三个接口,存取元素时,各有什么特点