addLoadEvent无助于onload冲突

Question

我正在使用流行的addLoadEvent来完成我所有的JS加载:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent( locationToggle );
addLoadEvent( step1 );
addLoadEvent( step2 );
addLoadEvent( step3 );
addLoadEvent( getCounties );
addLoadEvent( mapSelection);

我读过的所有内容都表明这是避免加载冲突的一种相当防弹的方法.然而,这个方法似乎没有比在匿名window.onload函数中包装函数更好.这两种方法都会导致与这组函数发生相同的onload冲突.

我从与addLoadEvent函数本身相同的文件中加载这些函数.我也在使用calender.js这是第三方文件,它在另一个文件中使用mootools 1.2.4.我的文件没有Javascript.

首先,有人可以验证我没有损坏代码,我正在使用它.第二,有人可能会建议为什么以上不能解决冲突？

编辑 问题仍然存在,禁用所有其他Javascript文件.

Answer 1

你的代码很好.问题是,设置事件处理程序的DOM 0的方式并不能保证他们不会被其它代码代替.

您可以尝试新的W3C标准 addEventListener和IE版本attachEvent,因为您附加的处理程序不能被第三方代码替换.

// window.onload W3C cross-browser with a fallback
function addLoadEvent(func) {
  if (window.addEventListener)
    window.addEventListener("load", func, false);
  else if (window.attachEvent)
    window.attachEvent("onload", func);
  else { // fallback
    var old = window.onload;
    window.onload = function() {
      if (old) old();
      func();
    };
  }
}

注意,IE将以相反的顺序执行该功能,而不是按照添加它们的顺序执行(如果这是一个问题).

最后,我不知道你什么时候想运行你的代码,但是如果你不想等待加载图像,你可以在 window.onload 之前执行你的函数.

迪恩爱德华兹有一个很好的剧本,可以让你这样做.

有了这个,您可以为早期事件附加函数:document.ready(DOMContentLoaded)

// document.ready
function addLoadEvent(func) {
  if (typeof func == "function") {
    addLoadEvent.queue.push(func);
  }
}
addLoadEvent.queue = [];

//////////////////////////////////////////////////////////////////////////////

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff: execute the queue
  var que = addLoadEvent.queue;
  var len = que.length;
  for(var i = 0; i < len; i++) {
    if (typeof que[i] == "function") {
      que[i]();
    }
  }
};

/* 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=javascript:void(0)>"
                +"<\/script>");
  var 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
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

注意:两种方法的用法与您的版本相同.

​