很早，大概去年就在mg12的博客看到他一篇很久以前的文章《 JavaScript 初始化装载方法 》，当时也没注意。这两天在做页面一些部分的延迟加载时，又想起了这个，因为使用window.onload，实在是一个很不明智的选择，很可能一个坏掉的图片或什么的就会导致你的JS迟迟装载不了，无法执行。
我试用了一下mg12文章中的方法，发现一个严重的错误，那就是在IE下如果同时绑定多个函数，那么就只会有最后一个执行。仔细分析了一下，原来是因为代码中判断IE页面文档初始化完毕时会向页面中写入一个
1: <script id="__ie_onload" defer src="javascript:void(0)"></script>
而绑定多个函数时，就会向页面中写入多个上面的标签，由于页面上只允许一个id存在，所以通过document.getElementById(“__ie_onload”);自然就只能获得一个对象，所以只会执行一个绑定函数了。
我对其稍微进行了改造，无非就是加个数值变量，每次写入时让ID不同。
1: var _flag=1;//标志整型变量
2: function documentReady(fun){
3: if (document.addEventListener) {
4: document.addEventListener("DOMContentLoaded", fun, false);
5: } else if (/MSIE/i.test(navigator.userAgent)) {
6: document.write('<script id=__ie_onload'+_flag+' defer src=//0><\/script>');
7: var script = document.getElementById("__ie_onload"+_flag);_flag++;
8: script.onreadystatechange = function() {
9: if (this.readyState == 'complete') {
10: fun();
11: }
12: }
13: } else if (/WebKit/i.test(navigator.userAgent)) {
14: var _timer = setInterval( function() {
15: if (/loaded|complete/.test(document.readyState)) {
16: clearInterval(_timer);
17: fun();
18: }
19: }, 10);
20: }
21: }
这样如果绑定多个函数，就会在页面上依次写入id=”__ie_onload1”、id=”__ie_onload2”。。。等<script>标签了。
如此一来，即使绑定多个函数也可以顺利执行了。
后话：今天闲暇时，又上网搜了一下这方面的东西，发现早在06年就有人贴出了几近完美的解决方法，而且他们也考虑到了多个事件函数执行的问题，通过栈结构解决的。它是将绑定的所有函数存入一个栈中，判断文档下载完成后，再从栈中依次取出函数执行，相比于我上面的方法，判断文档是否完成只需要一次即可，无论绑定了多少个函数都是只需一次，而我的就需要多次了。看样子mg12看的书貌似是抄袭人家的，也不知为何进行了精简，结果还给精简错了，囧。。原始网页在http://www.thefutureoftheweb.com/blog/adddomloadevent，有兴趣围观。
下面是文章的代码去掉注释后
1: addDOMLoadEvent = (function(){
2: var load_events = [],load_timer,script,done,exec,old_onload,
3: init = function () {
4: done = true;
5: clearInterval(load_timer);
6: while (exec = load_events.shift())
7: exec();
8: if (script) script.onreadystatechange = '';
9: };
10: return function (func) {
11: // if the init function was already ran, just run this function now and stop
12: if (done) return func();
13: if (!load_events[0]) {
14: // for Mozilla/Opera9
15: if (document.addEventListener)
16: document.addEventListener("DOMContentLoaded", init, false);
17: // for Internet Explorer
18: /*@cc_on @*/
19: /*@if (@_win32)*/
20: if (/MSIE/i.test(navigator.userAgent)){
21: document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
22: script = document.getElementById("__ie_onload");
23: script.onreadystatechange = function() {
24: if (this.readyState == "complete")
25: init(); // call the onload handler
26: };
27: }
28: /*@end @*/
29: // for Safari
30: if (/WebKit/i.test(navigator.userAgent)) { // sniff
31: load_timer = setInterval(function() {
32: if (/loaded|complete/.test(document.readyState))
33: init(); // call the onload handler
34: }, 10);
35: }
36: old_onload = window.onload;
37: window.onload = function() {
38: init();
39: if (old_onload) old_onload();
40: };
41: }
42: load_events.push(func);
43: }
44: })();
具体的效果，可以到我的友情链接页面查看。这个页面有许多favicon图标需要从不同的地址下载，需要时间较长，而使用本文中的初始化装载方法后，并不会因为图标的未下载而影响我js代码的执行。大家可以很顺利的看到边栏各个栏目被加载上(注：边栏应用了延迟加载)。
不懂JS哎。。。现在从做那个东西从前台HTML到后台数据库都要我搞，真头疼。。。
嘿嘿 效果灰常帅气哇
