making bbPress (and WordPress) work better!

stop using “window.onload” in JavaScript

2012 update: this entry is four years old – time for a modern revisit of my old, ugly code – try this instead:

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

——————————————–

I don’t write full blown AJAX but I do code some JavaScript from time to time. One big tip I can offer other “casual” javascript coders, since many times a script must be executed after a page is loaded, is to STOP using window.onload=your_function;

The reason for this is simple – you should be APPENDING your script to the page loaded hook, not CLOBBERING any existing scripts that may be already attached. The “window.onload” method can only hook one function at a time and these days it’s common to use several third party scripts on a site. If you are not careful, you may be left scratching your head why something stopped working – because you accidentally stopped it from loading.

There used to be some clever workarounds for this, like making a function that checked onload and appending it to a list of functions to call and replacing it with your own onload. But with modern browsers today, all that mess is not needed. Just replace your code with this (albeit longer) code:
if (window.attachEvent) {window.attachEvent('onload', your_function);}
else if (window.addEventListener) {window.addEventListener('load', your_function, false);}
else {document.addEventListener('load', your_function, false);}

Tested working in all major modern browser (IE, Firefox, Safari, Opera) and it appends instead of replaces the onload process. Hope that helps!

27 responses

  1. Null

    Interesting, will this work with bbPress too? And where to put this? In the header? What if I want to use this on just 1 page (let say on index.php)? Any thoughts?

    Greetz

    August 5, 2008 at 5:01 am

  2. aaaaaaaaaaaaaaaaaa

    November 20, 2008 at 2:55 am

  3. c.D

    November 20, 2008 at 2:56 am

  4. So just put all your functions into the function you’ve assigned to onLoad, right?

    November 23, 2008 at 8:10 pm

  5. Jason

    Brilliant!

    April 10, 2009 at 4:27 pm

  6. Yes I like it, but you really have to ask the question if onload is the correct approach in the first place.

    April 14, 2009 at 6:23 pm

  7. What about jQuery’s $(document).ready()?

    April 30, 2009 at 4:21 pm

  8. Jim

    Excellent – having a time getting a WordPress site to run both javascript SDMenus and Anarchy Media Player – your solution worked perfectly. Thank you.

    May 17, 2009 at 5:48 pm

  9. Amazing thank you very much

    June 2, 2009 at 9:35 am

  10. Pingback: Georgik » Blog Archive » Trasa výletu na Google Earth

  11. Though I don’t know much about it, there’s lot of help in the web to be able to learn more about this topic and how you will deal with it.

    July 10, 2009 at 7:43 am

  12. Thank you very much for your great solution! I had big problems with window.onload but now everything works perfectly.
    Thanks again and keep up the good word :).

    Greetings,
    Schiman

    July 25, 2009 at 4:43 pm

  13. my function has a bunch of alert boxes that start and take a while to click threw. when ur done clicking threw it takes you to a new page automatically. is there a way to get the page to load while the function is happening?

    July 28, 2009 at 1:16 pm

  14. thanks thanks thanks this is the best solution for window.onload

    October 29, 2009 at 9:03 pm

  15. Pingback: Shiba » Wordpress Search Widget – How to Style It

  16. Pingback: Shiba » Rotating WordPress Header

  17. RT @metrotwitapp: Just our luck, when we’re about to push out new MetroTwit update, Twitter API is having major issues again http://t.co/OIkijsGu

    October 16, 2011 at 11:53 am

  18. @BEYNCEcallmeDVA 1 unfollowed you between 1AM and 2AM. See who: http://t.co/x75PnCiF

    October 17, 2011 at 4:09 am

  19. Anonymous

    thank you rock

    October 31, 2011 at 11:24 pm

  20. Anonymous

    Thank you very much for this.

    January 10, 2012 at 4:21 pm

  21. Anonymous

    Finally the solution. My head is so in pain. Thank you very much!

    July 14, 2012 at 9:44 am

  22. Steve

    Maybe I’m a bit of a dullard, but, what file is this added too?

    September 28, 2012 at 5:41 pm

  23. Anonymous

    It helps me a lot!!!! Thank you!!!!

    August 5, 2013 at 6:23 pm

  24. Anonymous

    You rock, I don’t know a lot about javascript and was able to implement this with ease. Thanks so much!

    September 9, 2013 at 3:35 pm

  25. Anonymous

    You is awesomes. Very useful, thanks for that!

    September 12, 2013 at 12:01 pm

  26. niki

    Fixed my issue. Thanks!

    October 30, 2013 at 5:18 pm

  27. Thomas Bartsch

    Reblogged this on .NET Kick Start and commented:
    Toller Beitrag! :)

    June 18, 2014 at 1:39 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 45 other followers