Design · Culture · Spirituality

JavaScript functions on page load

One of the biggest annoyances (for me) about JavaScript is that the famous window.onload = functionname; only works once on a given page.

Over the years, many people have written various solutions to go around this, and cause the page to load multiple functions. Typically, my favorite is this one from Simon Wilson. It’s easy, concise, and works in a myriad of different situations.

The other day, though, I ran into a situation where it didn’t work. I’m still not sure what the issue was, but Internet Explorer 6 (of course) refused to load a couple of the functions I was trying to use. Firefox, IE7, Safari, etc. all loaded them very nicely, but IE6 remained stubborn. I tried everything: rewriting the functions, removing everything else in the page, changing random things that were unrelated, and so on, all to no avail.

Finally, I decided to try jQuery‘s load solution:

  1. $(document).ready(function() {
  2. functionname();
  3. });

This worked perfectly, in every browser. It didn’t occur to me to use this, mainly because the offending functions are not jQuery functions, and that particular page in the site didn’t have any jQuery on it at all. Now, it does.

File this away under: “I’m already using jQuery on a site, and I need to load some non-jQuery functions.”

Comments are closed.

About the Designer

Jonathan Stegall is a web designer and emergent / emerging follower of Jesus currently living in Atlanta, seeking to abide in the creative tension between theology, spirituality, design, and justice.

Elsewhere