javascript - JS : Attach body onload cross browser (methods comparison)

Question

我检查了Dean Edward's onload post并有一个问题:这个onload 附加方法有什么问题？它在哪里以及为什么会失败？什么时候可以安全地使用这个更简单的函数？

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

Answer 1

Dean 帖子的重点不是关于如何 Hook window.load事件，而是如何在 之前 Hook 一个有用的事件 window.load . window.load发生在页面加载周期的非常非常晚的时候(在所有 资源(包括所有图像)完全加载之后)。如果您的页面有任何重要资源并且您等到 window.load要连接您的事件处理程序，您的用户可能会在您的处理程序连接之前开始执行操作。

请注意，Dean 的文章写于 2006 年。现代做法是将您的脚本简单地放在结束前 </body>标签。只要您的脚本在它引用的任何元素之后，您就可以访问这些元素。这样一来，您确实可以很早就把事情搞定。

示例(live copy):

HTML:

<p>This page has a big image on it, to help demonstrate
  <code>window.load</code>'s very late arrival.
  Note that this paragraph started out black, but was
  turned green <em>immediately</em> on page load.
  This demonstrates that the paragraph was available
  to the code at the end of the page.
</p>
<img src="http://apod.nasa.gov/apod/image/1110/sh2136s_block900.jpg" style="position: absolute; top: 20em;">

JavaScript(就在 </body> 结束标记之前):

(function() {
  var first;

  function hookLoad(handler) {
    if (window.addEventListener) {
      window.addEventListener("load", handler, false);
    }
    else if (window.attachEvent) {
      window.attachEvent("onload", handler);
    }
  }

  display("Script running at end of page; turning paragraph green.");
  document.getElementsByTagName('p')[0].style.color = "green";

  hookLoad(function() {
    display("First load handler");
  });

  hookLoad(function() {
    display("Second load handler");
  });

  function display(msg) {
    var p = document.createElement('p'),
        now = new Date().getTime();
    msg = now + ": " + msg;
    if (first) {
      msg += " (delayed by " + (now - first) + "ms)";
    }
    else {
      first = now;
    }
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
})();

如果出于某种原因你不能这样做(将脚本放在 body 元素的末尾)，那么 Dean 的技巧就开始有用了，但我强烈建议反对 DIY“DOM加载”处理；相反，使用一个良好的、维护良好的库，如 jQuery , Prototype , YUI , 或 any of several others并使用他们的“就绪”事件。通过利用这些库中正在进行的工作，您可以转而专注于您尝试使用自己的页面/应用程序执行的操作。

---

引用资料:

• > YUI's best practices for speeding up your website
• > Google on when DOM elements are accessible (以及为什么他们的库没有“DOM 就绪”事件)

---

[回复 window.load特别是:您不必使用技巧，只需使用 addEventListener (如果浏览器支持，除了旧的 IE 版本，其他都支持)或 attachEvent (较旧的 IE)。参见 hookLoad在上面的例子中。这些允许一个事件有多个处理程序。]