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!
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
aaaaaaaaaaaaaaaaaa
November 20, 2008 at 2:55 am
c.D
November 20, 2008 at 2:56 am
So just put all your functions into the function you’ve assigned to onLoad, right?
November 23, 2008 at 8:10 pm
Brilliant!
April 10, 2009 at 4:27 pm
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
Why wouldn’t it be? I’m new to javascript, but you sure shot this idea down pretty fast without giving an alternative solution. I’m exclusively using this until I find a reason not to use it.
August 10, 2015 at 10:30 am
What about jQuery’s $(document).ready()?
April 30, 2009 at 4:21 pm
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
Amazing thank you very much
June 2, 2009 at 9:35 am
Pingback: Georgik » Blog Archive » Trasa výletu na Google Earth
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
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
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
thanks thanks thanks this is the best solution for window.onload
October 29, 2009 at 9:03 pm
Pingback: Shiba » Wordpress Search Widget – How to Style It
Pingback: Shiba » Rotating WordPress Header
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
@BEYNCEcallmeDVA 1 unfollowed you between 1AM and 2AM. See who: http://t.co/x75PnCiF
October 17, 2011 at 4:09 am
thank you rock
October 31, 2011 at 11:24 pm
Thank you very much for this.
January 10, 2012 at 4:21 pm
Finally the solution. My head is so in pain. Thank you very much!
July 14, 2012 at 9:44 am
Maybe I’m a bit of a dullard, but, what file is this added too?
September 28, 2012 at 5:41 pm
It helps me a lot!!!! Thank you!!!!
August 5, 2013 at 6:23 pm
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
You is awesomes. Very useful, thanks for that!
September 12, 2013 at 12:01 pm
Fixed my issue. Thanks!
October 30, 2013 at 5:18 pm
Reblogged this on .NET Kick Start and commented:
Toller Beitrag! 🙂
June 18, 2014 at 1:39 pm
Wonderful!!! Been beating my forehead bloody on my monitor for days now and this fixed it. Thank you!
October 1, 2014 at 5:56 pm
Reblogged this on carasimpeldotcom.
April 25, 2018 at 5:55 am
12 years later, is this longer code still useful?
February 25, 2020 at 2:32 am