25
Jul
08

stop using “window.onload” in JavaScript

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!


16 Responses to “stop using “window.onload” in JavaScript”


  1. 1 Null
    August 5, 2008 at 5:01 am

    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

  2. November 23, 2008 at 8:10 pm

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

  3. 5 Jason
    April 10, 2009 at 4:27 pm

    Brilliant!

  4. April 14, 2009 at 6:23 pm

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

  5. April 30, 2009 at 4:21 pm

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

  6. 8 Jim
    May 17, 2009 at 5:48 pm

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

  7. June 2, 2009 at 9:35 am

    Amazing thank you very much

  8. July 10, 2009 at 7:43 am

    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.

  9. July 25, 2009 at 4:43 pm

    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

  10. July 28, 2009 at 1:16 pm

    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?

  11. October 29, 2009 at 9:03 pm

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


Leave a Reply




c

Blog Stats

  • 63,220 hits

 

July 2008
S M T W T F S
« May   Aug »
 12345
6789101112
13141516171819
20212223242526
2728293031