`

一个跨平台的DOMContentLoaded的解决方案

阅读更多

一个跨平台的DOMContentLoaded的解决方案

 

文件名称: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;
    });
}

分享到:
评论

相关推荐

    Javascript封装DOMContentLoaded事件实例

    主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下

    JS兼容所有浏览器的DOMContentLoaded事件

    主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料,标准浏览器中,使用DOMContentLoaded事件即可实现我们的要求,注册事件处理函数也极为简单,感兴趣的朋友一起学习吧

    domloaded检查何时加载DOM类似于DOMContentLoaded

    dom-loaded 检查何时加载DOM类似于`DOMContentLoaded`

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

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

    snack:一个小型的、跨浏览器的 JavaScript 库

    小吃.js ...因为有时,您只需要一份零食。警告! 我不维护它,所以如果你使用它,你... 存储库中有一个 docs 文件夹。 只需在浏览器中打开docs/index.html或访问 。贡献/测试/构建零食子模块(选择引擎) 因为 Snack

    dom-loaded:检查DOM是否已像DOMContentLoaded一样加载

    加载了dom 检查DOM是否已像一样加载与DOMContentLoaded不同,这在加载DOM之后包含在内时也适用。安装$ npm install dom-loaded用法import domLoaded from 'dom-loaded' ;await domLoaded ;console . log ( 'The DOM ...

    [removed] 加载完毕的问题及解决方案(上)

    解决方法, 一、Mozilla 提供了一个非公开的(undocumented)函数: 代码如下:// for Mozilla browsers if (document.addEventListener) { document.addEventListener(“DOMContentLoaded”, init, false); } 二、对于...

    Layar网络绩效预算「Layar Web Performance Budget」-crx插件

    用预算功能显示web性能的扩展(速度索引,DOMContentLoaded,时间到第一个字节) “ Layar Performance”预算会显示具有预算功能的网站性能(RUM速度指数,DOMContentLoaded和TTFB)。 此扩展将在您开发网站时为您提供...

    unbreak:一个用于无孤儿响应式排版的小型 javascript 库

    一个用于无孤儿响应式排版的小型原生 JavaScript 库,可将目标元素的最后一个空格字符转换为不间断空格字符。 注意:理想情况下,这应该在服务器端完成,但在不可能的情况下,可以使用轻量级且相对快速的客户端解决...

    js-fetch-monster-practice-challenge-seattle-web-062419

    怪兽 对于此练习代码挑战,您的目标是为我们的怪物数据构建前端。... 将脚本标记注释为js/demo.js ,然后将脚本标记注释为js/index.js ,在此您将对解决方案进行...在怪物列表上方,您应该具有一个表格来创建一个新的怪物

    littlepjs-document-onload-dc-web-120919

    在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码,以确保您的代码在页面准备就绪之前不会运行。 确定“正确时间”的因素很多...

    littlepjs-文档-加载-nyc01-seng-ft-042020

    在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码,以确保您的代码在页面准备就绪之前不会运行。 确定“正确时间”的因素很多...

    littlepjs-文档-加载-nyc-web-080519

    在文档加载时加载JavaScript学习目标了解DOMContentLoaded为什么如此重要在DOMContentLoaded上设置一个事件介绍使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码,以...

    fewpjs-document-onload-rcdd_202104_tur_few

    在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码,以确保您的代码在页面准备就绪之前不会运行。 确定“正确时间”的因素很多...

    somepjs-document-onload-dc-web-102819

    在DOMContentLoaded上设置一个事件 介绍 使用JavaScript的重要部分是确保您的代码在正确的时间运行。 有时您可能不得不添加一些额外的代码,以确保您的代码在页面准备就绪之前不会运行。 确定“正确时间”的因素很多...

    AngularJS 执行流程详细介绍

    当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOMContentLoaded事件。当Angular监听到这个...

    DOM元素高亮Highlighter.js.zip

    Highlighter.js 是一个小型(纯 javascript)的库,可以让你轻松导航、选择以及高亮 DOM 元素。用法:document.addEventListener("DOMContentLoaded", function() {  var Highlighter = new window....

Global site tag (gtag.js) - Google Analytics