Best practice for using window.onload

by

window.onload = function(){}; works, but as you might have noticed, it allows you to specify only 1 listener.

I’d say the better/newer way of doing this would be to use a framework, or to just to use a simple implementation of the native addEventListener and attachEvent (for IE) methods, which allows you to remove the listeners for the events as well.

Here’s a cross-browser implementation:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

For the window.onload case use: listen("load", window, function() { });

EDIT I’d like to expand my answer by adding precious information that was pointed by others.

This is about the DOMContentLoaded (Mozilla, Opera and webkit nightlies currently support this) and the onreadystatechange (for IE) events which can be applied to the document object to understand when the document is available to be manipulated (without waiting for all the images/stylesheets etc.. to be loaded).

There are a lot of “hacky” implementations for cross-browsers support of this, so I strongly suggest to use a framework for this feature.

More Related Contents:

  1. Checkbox hidden on body load [closed]
  2. How to run a function when the page is loaded?
  3. iFrame src change event detection?
  4. How do I call a JavaScript function on page load?
  5. Trying to fire the onload event on script tag
  6. Execute write on doc: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
  7. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  8. How to run function in AngularJS controller on document ready?
  9. ‘onload’ handler for ‘script’ tag in internet explorer
  10. Javascript read file without using input
  11. Cannot set property ‘innerHTML’ of null
  12. Attach a body onload event with JS
  13. AngularJS – Image “onload” event
  14. What html tags support the onload/onerror javascript event attributes?
  15. Difference between onload() and $.ready?
  16. Recall Tampermonkey script when page location changes
  17. javascript – document.write error?
  18. iFrame onload JavaScript event
  19. Javascript before onload?
  20. When to use “window.onload”?
  21. Async-loaded scripts with DOMContentLoaded or load event handlers not being called?
  22. Is there a way to have an onload callback after changing window.location.href?
  23. Is bubbling available for image load events?
  24. Intercept calls to console.log in Chrome
  25. Each then() should return a value or throw Firebase cloud functions
  26. What does the JavaScript syntax foo: mean?
  27. How to build simple tabs with jQuery?
  28. Replace element at specific position in an array without mutating it
  29. how many javascript setTimeout/ setInterval call can be set simultaneously in one page?
  30. How can I use Perl to grab text from a web page that is dynamically generated with JavaScript?

Leave a Comment