Should I use window.onload or script block?

Question

I have a javascript function that manipulates the DOM when it is called (adds CSS classes, etc). This is invoked when the user changes some values in a form. When the document is first loading, I want to invoke this function to prepare the initial state (which is simpler in this case than setting up the DOM from the server side to the correct initial state).

Is it better to use window.onload to do this functionality or have a script block after the DOM elements I need to modify? For either case, why is it better?

For example:

function updateDOM(id) {
    // updates the id element based on form state
}

should I invoke it via:

window.onload = function() { updateDOM("myElement"); };

or:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

The former seems to be the standard way to do it, but the latter seems to be just as good, perhaps better since it will update the element as soon as the script is hit, and as long as it is placed after the element, I don't see a problem with it.

Any thoughts? Is one version really better than the other?

Answer 1

I've written lots of Javascript and window.onload is a terrible way to do it. It is brittle and waits until every asset of the page has loaded. So if one image takes forever or a resource doesn't timeout until 30 seconds, your code will not run before the user can see/manipulate the page.

Also, if another piece of Javascript decides to use window.onload = function() {}, your code will be blown away.

The proper way to run your code when the page is ready is wait for the element you need to change is ready/available. Many JS libraries have this as built-in functionality.

Check out:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 2

The onload event is considered the proper way to do it, but if you don't mind using a javascript library, jQuery's $(document).ready() is even better.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

The advantages are:

1. Call $(document).ready() as many times as you want to register additional code to run - you can only set window.onload once.
2. $(document).ready() actions happen as soon as the DOM is complete - window.onload has to wait for images and such.

I hope I'm not becoming The Guy Who Suggests jQuery On Every JavaScript Question, but it really is great.