Question

I have examined Dean Edward’s onload post and have a question: what’s wrong with this onload attaching method? Where and why can it fail? And when is it safe to use this simpler function?

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

Answer 1

The point of Dean’s post isn’t about how to hook the window.load event, but rather how to hook a useful event prior to window.load. window.load happens very, very late in the page load cycle (after all resources, including all images, are fully loaded). If your page has any significant resources and you wait until window.load to hook up your event handlers, your users are likely to start doing things before your handlers are hooked up.

Note that Dean’s article was written in 2006. The modern practice is to simply put your script just prior to the closing </body> tag. As long as your script is after any elements it refers to, the elements will be accessible to you. That way, you hook things up very early on indeed.

Example (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 (just before </body> end tag):

(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);
  }
})();

If you can’t do that (put the script at the end of the body element) for some reason, then tricks like Dean’s start being useful, but I’d strongly recommend against DIY “DOM loaded” handling; instead, use a good, well-maintained library like jQuery, Prototype, YUI, or any of several others and use their “ready” event. By leveraging the ongoing work put into those libraries, you can instead focus on what you’re trying to do with your own page/app.

---

References:

• YUI’s best practices for speeding up your website
• Google on when DOM elements are accessible (and why their library doesn’t have a “DOM ready” event)

---

[Re window.load specifically: You don’t have to resort to your trick, just use addEventListener (if the browser supports it, all do except older IE versions) or attachEvent (older IE). See hookLoad in the example above. Those allow multiple handlers for an event.]