JavaScript页面文档初始化 window.onload的替代办法

最新推荐文章于 2024-01-24 13:48:46 发布

转载最新推荐文章于 2024-01-24 13:48:46 发布 · 646 阅读

文章标签：

#javascript #文档 #function #timer #ie #fun

HTML优化专栏收录该内容

9 篇文章

订阅专栏

本文介绍了改进的JavaScript初始化装载方法，解决了window.onload在IE环境下只执行最后一个绑定函数的问题，并对比了不同解决方案的优劣。

很早，大概去年就在mg12的博客看到他一篇很久以前的文章《 JavaScript 初始化装载方法 》，当时也没注意。这两天在做页面一些部分的延迟加载时，又想起了这个，因为使用window.onload，实在是一个很不明智的选择，很可能一个坏掉的图片或什么的就会导致你的JS迟迟装载不了，无法执行。

我试用了一下mg12文章中的方法，发现一个严重的错误，那就是在IE下如果同时绑定多个函数，那么就只会有最后一个执行。仔细分析了一下，原来是因为代码中判断IE页面文档初始化完毕时会向页面中写入一个

 
<script id="__ie_onload" defer src="javascript:void(0)"></script> 
 

而绑定多个函数时，就会向页面中写入多个上面的标签，由于页面上只允许一个id存在，所以通过document.getElementById(“__ie_onload”);自然就只能获得一个对象，所以只会执行一个绑定函数了。

我对其稍微进行了改造，无非就是加个数值变量，每次写入时让ID不同。

 
var _flag=1;//标志整型变量 
function documentReady(fun){ 
    if (document.addEventListener) { 
        document.addEventListener("DOMContentLoaded", fun, false); 
    } else if (/MSIE/i.test(navigator.userAgent)) { 
        document.write('<script id=__ie_onload'+_flag+' defer src=//0><\/script>'); 
        var script = document.getElementById("__ie_onload"+_flag);_flag++; 
        script.onreadystatechange = function() { 
            if (this.readyState == 'complete') { 
                fun(); 
            } 
        } 
    } else if (/WebKit/i.test(navigator.userAgent)) { 
        var _timer = setInterval( function() { 
            if (/loaded|complete/.test(document.readyState)) { 
                clearInterval(_timer); 
                fun(); 
            } 
        }, 10); 
    } 
} 
 

这样如果绑定多个函数，就会在页面上依次写入id=”__ie_onload1”、id=”__ie_onload2”。。。等<script>标签了。

如此一来，即使绑定多个函数也可以顺利执行了。

后话：今天闲暇时，又上网搜了一下这方面的东西，发现早在06年就有人贴出了几近完美的解决方法，而且他们也考虑到了多个事件函数执行的问题，通过栈结构解决的。它是将绑定的所有函数存入一个栈中，判断文档下载完成后，再从栈中依次取出函数执行，相比于我上面的方法，判断文档是否完成只需要一次即可，无论绑定了多少个函数都是只需一次，而我的就需要多次了。看样子mg12看的书貌似是抄袭人家的，也不知为何进行了精简，结果还给精简错了，囧。。原始网页在http://www.thefutureoftheweb.com/blog/adddomloadevent，有兴趣围观。

下面是文章的代码去掉注释后

 
addDOMLoadEvent = (function(){ 
    var load_events = [],load_timer,script,done,exec,old_onload, 
        init = function () { 
            done = true; 
            clearInterval(load_timer); 
            while (exec = load_events.shift()) 
                exec(); 
            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)*/ 
            if (/MSIE/i.test(navigator.userAgent)){ 
                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); 
            } 
            old_onload = window.onload; 
            window.onload = function() { 
                init(); 
                if (old_onload) old_onload(); 
            }; 
        } 
        load_events.push(func); 
    } 
})(); 
 