zoukankan      html  css  js  c++  java
  • 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工具, 以往调用初始化的方法是:

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

  • 相关阅读:
    面向接口程序设计思想实践
    Block Chain Learning Notes
    ECMAScript 6.0
    Etcd Learning Notes
    Travis CI Build Continuous Integration
    Markdown Learning Notes
    SPRING MICROSERVICES IN ACTION
    Java Interview Questions Summary
    Node.js Learning Notes
    Apache Thrift Learning Notes
  • 原文地址:https://www.cnblogs.com/shikyoh/p/2048682.html
Copyright © 2011-2022 走看看