How To Use Multiple Onload Functions in Javascript – addLoadEvent

Onload functions are used when you want something to happen as soon as the page is loaded.

Here is an example of how you could write it, placing it in the head of the document:

[code lang="html"]window.onload = someFunction;[/code]

The bad part is, you can only call one function this way. What if you need to call more than one? The most awesome way to do this is by using a function written by Simon Willison. You can put this code in a .js file that is included in the pages you need to call the onload functions. You don’t need to put ANY code in the pages themselves. This is totally onobtrusive javascript.

[code lang="javascript"] function addLoadEvent(func) { /* used for unobtrusive, multiple onload functions */
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}else{
window.onload = function() {
if(oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(yourFirstFunction);
addLoadEvent(yourSecondFunction);
//add more functions if you want
[/code]

This entry was posted in Javascript and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>