Window.onload() is a workhorse of traditional javascript code. It’s been used by coders for years to kick start the client side magic as soon as everything on the page loads up.
But sometimes waiting for a page to load just isn’t quick enough.
A few large image files will quickly reveal that window.onload() can be painfully slow. So when I was creating a web app for internet marketers recently, I had to have something faster.
Some quick research into possible workarounds for the window.onload() issue brought me to some code by Brother Cake. If all you need is a fast way to kick start your javascript then their code might be something to try.
But if you’re going to be doing some DOM (Document Object Model) javascript coding then why not use jQuery and have your cake and eat it too (horrible pun – sorry).
jQuery has a handy little function that launches your javascript as soon as the Document Object Model is ready… which happens before the page has finished loading.
$(document).ready(function(){
// Your code here...
});
You can use it to launch any kind of javascript you like. It doesn’t have to be reserved for jQuery style coding. And there’s nothing wrong with telling jQuery to launch several different functions at once.
Similar to many init() functions you may have seen before… just a lot faster.
You’ll see this code used again and again in the examples I give you on 15 Days of jQuery.
[tags]jQuery, DOM, javascript, window.onload[/tags]
112 Responses
wesley
May 23rd, 2006 at 7:40 am
1Too bad that there’s all sorts of issues with it:
http://jquery.com/discuss/2006-May/001280/
Jack
May 23rd, 2006 at 9:42 am
2Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
Joel Birch
May 27th, 2006 at 6:16 am
3Yes, I’ve mentioned the $(document).ready() shortcomings before myself, but jQuery is really young – these sorts of teething problems are being fixed at an amazing rate. $(document).ready() is still my first choice when initialising scripts that need to fire as early as possible. When it works (which usually means when other scripts are not interfering) its an absolute gem.
Dustin Diaz
May 29th, 2006 at 3:17 am
4The YUI equivalent of this would be YAHOO.util.Event.onAvailable which acts just like an eventListener and will fire upon ‘load’ of whatever HTMLElement that you pass in.
Cheers
Jack
May 29th, 2006 at 5:45 pm
5Dustin,
As you know from my email to you, I’m a fan of yours. Great to have you stop by!
Dean Edwards
May 31st, 2006 at 6:46 am
6> From what I’ve read, it seems to be limited to situations
> where there is a document.write in the code.
There are more problems than that. The back button on IE causes the page to render in a slightly different way. This often breaks timer based detects.
Jack
May 31st, 2006 at 9:08 am
7Dean,
First of all, great to have you stop by.
I wasn’t aware of this issue. Although I haven’t noticed it myself, I’ll take you at your word.
Do you know if the other methods of triggering quick javascript execution before window load (Brother Cake, YUI, etc.) have the same issue(s)?
Jack
May 31st, 2006 at 12:29 pm
8Dean has supplied me with two links to his site where he has code that may work for those of you that want something other than jQuery’s solution:
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2005/09/busted2/
According to Dean, the Brother Cake solution as well as the YUI one (and I suppose all other solutions) are not as relaible as the ones he has come up with.
Dean Edwards
June 1st, 2006 at 7:23 am
9The YUI one is OK because it uses
to check for the existence of elements, so it is not really dependant on a complete DOM. The downside is that you have to assign an ID on every element you want to address.
Hercules Papatheodorou
July 9th, 2006 at 6:59 pm
10While jQuery’s $(document).ready(); seems to be working excellently in Firefox and IE (it’s way better than the onload), it miserably fails in Opera9 resulting in a crash of my layout. You can check the code in my website actually. I’ll be using the onload one till that gets sorted out because I main test on Opera :/
Jack
July 10th, 2006 at 8:50 am
11Hercules,
Have you tried the latest release?
http://jquery.com/src/jquery-1.0a.js
John announced it on his blog just a few days ago.
http://jquery.com/blog/2006/06/30/jquery-10-alpha-release/
And according to John, one of the improvements is in the (document).ready function:
I have never been able to replicate the problems reported with document.ready so I can’t really attest to the improvement… but looking at the code leads me to believe that it uses the typical window.onload as a backup “Plan B”.
Hercules Papatheodorou
July 11th, 2006 at 5:35 pm
12I tried what you suggested but it now behaves as the plain old onload, even in FF, which was the only one of the big 3 handling the .ready as it should… I guess I;ll just wait for the finalized release.
Pozycjonowanie
October 15th, 2006 at 6:51 am
13The YUI one is OK because it uses document.getElementById to check for the existence of elements, so it is not really dependant on a complete DOM. The downside is that you have to assign an ID on every element you want to address.
Mountain/\Ash
March 13th, 2007 at 5:58 pm
14Is this different to just using
$(function() { // onload scripts });nawadnianie
May 14th, 2007 at 7:36 am
15Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
budowa domów
May 29th, 2007 at 6:54 am
16good article
tshirts
July 17th, 2007 at 11:07 pm
17Great post. You explain the issues and solution clearly. YUI does work reasonably well, but in my experience they can be a little pushy in trying to get programmers to use it. Their basic approach seems to be that anything that makes your page faster trumps all other considerations. In contrast, I would suggest that content counts for a lot and all the speed in the world can’t overcome a lousy looking or functioning page. Additionally, this seems like a simpler, more elegant solution, even if it is still in the process of working the kinks out. And after all, what are a few kinks among friends, right? After all, it isn’t like there aren’t bugs in virtually every piece of software out there.
James Oppenheim
August 6th, 2007 at 2:04 am
18Great article. However, I still seem to be having problems in IE6 + IE7 as it somethings does not .hide() elements at all. But when I refresh the page it all works fine. Strange!?
custom oil paintings
August 15th, 2007 at 5:41 am
19Our problem with Window.onload() is with images. Since our site includes a lot of images, I noticed a lag before the page becomes active. What we want is a way to determine when the DOM has fully loaded without waiting for all those pesky images to load also. System is OK with IE but we’re having problems with FF.
Addict
September 11th, 2007 at 11:10 pm
20Maybe its only matter of hardware not software .Maybe when we gonna use p9 47Ghz 1600 gxz 128000ram then its gonna be flawless like a ….or hmmm
Lorenzo
September 12th, 2007 at 4:52 pm
21Can you please put all the html code in this page so I can copy-paste it and try jquery? This is for extremelly dummies like me? Thanks
Antyki
September 25th, 2007 at 8:58 am
22On Ie it works great! Thanks!
Jules
September 30th, 2007 at 12:04 am
23WHy is this a whole day? You can market your site better if you say 15 minutes of jquery. Nobody wants to spend 15 days learning a javascript library.
Jack
October 1st, 2007 at 10:28 am
24It’s a takeoff on another site, and the concept is/was to have one tutorial a day. Not that it should take 15 days to wrap your head around jquery, or any other js library for that matter.
sharp aquos
December 19th, 2007 at 10:00 pm
25Great article. However, I still seem to be having problems in IE6 + IE7 as it somethings does not .hide() elements at all.
Bret Bouchard
January 31st, 2008 at 11:28 am
26Very nice, This came in very handy with speeding up a site I’m working on.
agencja modelek
April 9th, 2008 at 4:28 am
27I use jQuery in my project and Im very impressed of its abilities. I recommend jQuery for all webdevelopers.
greetings,
agencja modelek
Jonah Dempcy
May 9th, 2008 at 6:11 am
28How does the jQuery $(document).ready() compare to MooTools’ ‘domready’ event, or Prototype ‘dom:loaded’ ?
Brian
June 18th, 2008 at 4:35 pm
29can you use $(document).ready() on a page that has a body.onload function call?
I’m in a situation where I cant remove the old JS that has an onload on the body element… from my reading the JQuery ready event gets fired before the old JS would..
online shopping
June 29th, 2008 at 9:10 am
30I’m hoping that the new browsers out there (FireFox 3, IE8, Opera 10 when it happens etc.) will put an end to some of the loading times and somehow implement this sort of coding on websites themselves. I have a feeling that regardless of what we do with JQUERY, we’ll still find that IE7 or IE6 (which, apparently, most people still run on which is ridiculous) might still just put it’s habits on the page – meaning that it’s pretty useless at the end of the day until the developers for the browsers do something instead.
NETTUTS - 15 Resources To Get You Started With jQuery From Scratch
July 16th, 2008 at 12:03 am
31[...] Visit Article [...]
15 Resources To Get You Started With jQuery From Scratch | Mexzhouse Design Studio
July 27th, 2008 at 7:58 pm
32[...] Visit Article [...]
Jquery For Dunmmies | mashup design | pisake | web design | css | playground
August 8th, 2008 at 6:09 am
33[...] Visit Article [...]
“The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption
August 18th, 2008 at 10:42 pm
34[...] Quicker Than Window.Onload()Load your Javascript before every element of the page is loaded. [...]
waqas
October 5th, 2008 at 3:28 pm
35u can make ur jqurry n other stuf in html readymade here http://66lives.ueuo.com
Allen
November 18th, 2008 at 10:17 pm
36good article!
Michael Everitt
December 15th, 2008 at 1:10 am
37Thanks for the article. I’m just learning jQuery and to tell you the truth 15 days of jQuery is plenty fast for me. Posts like yours sure help.
sunlightcs
January 4th, 2009 at 2:48 am
38good!
????
January 4th, 2009 at 2:52 am
39On Ie it works great! Thanks!
jQuery Ö?retecek 15 Kaynak | MuGi Graphic System
January 14th, 2009 at 2:58 pm
40[...] 15DaysOfJquery.com: 1. Gün: jQuery’nin tüm özelliklerini iki haftada kavramak gibi cesur bir giri?imde bulunan “15 Days of jQuery” (jQuery ile 15 Gün) web sitesi her gün bir konuyu i?liyor. Bu makalede “document.ready” yöntemini nas?l kullanman?z gerekti?ini ö?reneceksiniz. [...]
pozycjonowanie i optymalizacja
January 17th, 2009 at 12:06 pm
41Wielu twórców stron zastanawia si? nad tym, w jaki sposób tworzy? witryny przyjazne wyszukiwarkom takim jak Google. Które rzeczy s? wa?ne z punktu widzenia indeksowania strony internetowej, a które s? nieistotne
Serge
January 19th, 2009 at 1:55 am
42When DOM loads that doesn’t mean that your images are loaded. I wouldn’t use ready() even on a site with small graphics. If your end-user is on a slow connection they can get an JS error while interacting with the UI on the site before anything even loads. Be careful with it. I think ready() would be more applicable for intranet stuff.
manish nagar
January 21st, 2009 at 2:27 am
43Its really good for learner for basic of the Jquery. Thanks!!
» Size S?f?rdan jQuery Ö?retecek 15 Kaynak Duymadim.com: Bunudam? duymad?n? Araç Bilgisayar Bilim Donan?m Fragmanlar Genel Komedi Magazin Müzik Mobil Oyunlar Son Dakika Spor Teknoloji Uzay Video Yaz?l?m ?nternet Yeni teknolojiler Yeni telefonlar yen
February 5th, 2009 at 10:07 am
44[...] 15DaysOfJquery.com: 1. Gün: jQuery’nin tüm özelliklerini iki haftada kavramak gibi cesur bir giri?imde bulunan “15 Days of jQuery” (jQuery ile 15 Gün) web sitesi her gün bir konuyu i?liyor. Bu makalede “document.ready” yöntemini nas?l kullanman?z gerekti?ini ö?reneceksiniz. [...]
LOL
March 16th, 2009 at 8:01 am
45> WHy is this a whole day? You can market your site better if you say 15 minutes of jquery. Nobody wants to spend 15 days learning a javascript library.
Oh man, I have this idea for 6 minute abs. It will blow 7 minute abs out of the water!
Maarten
March 22nd, 2009 at 7:27 pm
46Better is not to use this function at all! If you place the jquery script at the end of your html (before you close your body) it will fire even faster as document ready (since that one waits for example loading of external banners or content iframe. It then also follows YIU guidelines!! I declare jquery in the head and then use all dom events in one file which i place below all html. Works faster in all occasions!!
sundowach
April 11th, 2009 at 3:54 pm
47That JQuery is very good library.
meneye
April 14th, 2009 at 9:20 am
48Great article.thanks.
0 ( s?f?rdan ) Jquery Ö?reten 15 Kaynak | ONLINE SCRIPT YUVANIZ - ASP,PHP,C,JS,FLASH,AJAX..
May 16th, 2009 at 7:16 am
49[...] 15DaysOfJquery.com: 1. Gün: jQuery’nin tüm özelliklerini iki haftada kavramak gibi cesur bir giri?imde bulunan “15 Days of jQuery” (jQuery ile 15 Gün) web sitesi her gün bir konuyu i?liyor. Bu makalede “document.ready” yöntemini nas?l kullanman?z gerekti?ini ö?reneceksiniz. [...]
Emlak
May 25th, 2009 at 5:22 pm
50Starting with Jquery and now i know a little bit more about the difference between document ready and window.onload
Cody Taylor
June 26th, 2009 at 4:53 pm
51This is the first JQuery article I’ve read. Normally I use Prototype or Dojo but I’ve been seeing way to much about JQuery everywhere to not learn it. Thanks and I’m looking forward to the next 14 articles.
Carl
July 2nd, 2009 at 8:04 am
52Jquery with Opera was always a bit problematic.
pligg.com
July 18th, 2009 at 2:19 am
53Quicker Than window.onload…
Window.onload() is a workhorse of traditional javascript code. It’s been used by coders for years to kick start the client side magic as soon as everything on the page loads up.
But sometimes waiting for a page to load just isn’t quick enough.
A …
Rob
August 12th, 2009 at 4:46 pm
54@Cody Taylor: I’ve tried both of those and JQuery is by far the more intuitive framework to use. I really like how you can chain function together too, really useful.
Arjun
September 23rd, 2009 at 12:09 pm
55This works for me:
$(document).ready( function () {
alert(“test”):
});
Dan
October 19th, 2009 at 1:07 pm
56I like Jqueries.
Bob
October 21st, 2009 at 8:48 pm
57Arjun, why would you do that if you can do: $(function(){alert(‘h’);});
jack
October 26th, 2009 at 1:25 am
58when adding comments USE ENGLISH!!!! don’t just put unrelated crap so you can get a link to you pathetic website you dumb spammers!
jack
October 26th, 2009 at 1:27 am
59sorry, just to make it clear…, last comment above is not from Jack the author of the article
we are two different people
Asmita
January 11th, 2010 at 6:15 am
60I have used CrossSlide Jquery plugin in my website and my website is taking too long to load.Please tell me the solution.
bieszczady noclegi
March 4th, 2010 at 7:55 am
61nice article! short , but good
kangtanto
March 23rd, 2010 at 5:30 am
62I just learn Jquery and I am still confuse when I have many jquery effects on multiple pages.
So far, I always put
$(document).ready(function(){
// Your code here…
});
on every pages… although I have a single template for my web, but you know, every pages has different effect…
Do you know the best solution to manage multiple effect of Jquery on multiple pages?
thanks in advance….
Kody
March 23rd, 2010 at 11:00 am
63Hi! I have some problem with Jquery and body onLoad… how can i do something like call a function in the body onLoad of the htm page, wich pass a parameter too, and then in the js file assign that param to a div.
Something like:
page.php
———–
<body onLoad=”updateArea(”);”
funcs.js
———–
$(document).ready(function(){
updateArea(area) { $(‘#mydiv’).html(area); }
});
Obviusly that example doesn’t work cause it’s wrong.
Thanks in advance.
jQuery cannot cook | I-Am-Bot
April 23rd, 2010 at 11:00 am
64[...] can execute a bit faster when compared to using the traditional window.onload method. More on that here and [...]
Pattern Inc » Learning jQuery – Tutorial Roundup for Beginners
April 26th, 2010 at 3:20 am
65[...] 15 Days Of jQuery [...]
Learning jQuery – Tutorial Roundup for Beginners | Duong Luat
April 26th, 2010 at 8:13 am
66[...] 15 Days Of jQuery [...]
Homeschool
May 21st, 2010 at 12:47 pm
67@Asmita make sure you use
$(window).load(function() { #slider.crossSlide(); });
to make sure all of the images are loaded. $(document).ready() won’t wait for the images to load.
I suggest Nivo Slider (google it)
zigojacko
September 1st, 2010 at 11:08 am
68Can this essentially be used to decrease the size of pages? If a page has a lot of javascript starting on page load, this is what this will help with is it?
I’m unsure what I need to do. Thanks
honeymoons
September 9th, 2010 at 2:13 pm
69Th4t be an epic da shizzi4 post, th4nkie 4it & in da futures we’ll be seeing more of it
cruises
September 9th, 2010 at 2:15 pm
70We7ll I8be dat9 ogr6e speekie da speekie, gratz & than4x
flight center
September 9th, 2010 at 2:15 pm
71heb7e sh8at be th34nkie 4it on da posting left & righ8ty
british gas homecare
October 5th, 2010 at 10:29 am
72Like the jQueryfunction that launches the javascript as soon as the Document Object Model is ready… which happens before the page has finished loading.
$(document).ready(function(){
// Your code here…
});
I program in Delphi and am used to an event model which this supports.
???
October 11th, 2010 at 11:18 pm
73I realize the 2worry.I am very r happy to hear that you got your Supra fixed; I remember reading about some of your questions2x !.
Juegos
November 1st, 2010 at 10:45 am
74I’m not a big fan of jQuery but I have to admit, it can be very useful in some situations.
juegos
November 9th, 2010 at 3:04 pm
75interesting Post. Thanks Jack
Oase
December 30th, 2010 at 7:09 pm
76very interesting Post. Thanks Jack !!!
Soll
December 30th, 2010 at 7:10 pm
77I think good post. Proffesional articule
Nawadnianie
December 30th, 2010 at 7:11 pm
78I think you not a big fan of jQuerty.
randomdude
January 7th, 2011 at 7:00 pm
79Nice explanation.
calivita
January 10th, 2011 at 3:39 pm
80I love reading your blog. I’ve you bookmarked your website in order to check out the latest stuff.
wpolscemamymocneseo
January 11th, 2011 at 5:25 am
81this was a really quality post. In theory I’d like to write like this also – taking time and real effort to make a good article. Really what I needed. Thanks I have been looking for this sort of info for a long time.
sexy bras
January 12th, 2011 at 12:21 am
82Finally, an issue that I am passionate about. I have looked for information of this caliber for the last several hours. Your site is greatly appreciated.
Oase
January 18th, 2011 at 5:48 pm
83I think wery good post. Proffesional articule
Oczka wodne
January 18th, 2011 at 5:50 pm
84Can this essentially be used to decrease the size of pages? If a page has a lot of javascript starting on page load, this is what this will help with is it?
I’m unsure what I need to do. Thanks
Soll
January 18th, 2011 at 5:51 pm
85I think you not a big fan of jQuerty
Pontec
January 18th, 2011 at 5:52 pm
86v7web
January 21st, 2011 at 6:27 pm
87Many thanks I will be using:
$(document).ready(function(){
// Your code here…
});
Thats for sure.
how get back with your ex
January 21st, 2011 at 6:28 pm
88Nice snippet thanks
September Blakeney
February 1st, 2011 at 3:51 am
89Hey! This post could not be written any better! Reading through this post reminds me of my good old room mate! He always kept chatting about this. I will forward this post to him. Pretty sure he will have a good read. Thanks for sharing!
threeblackcats.de » Quicker than window.onload
February 25th, 2011 at 8:37 pm
90[...] http://15daysofjquery.com/quicker/4/ Categories: Flash-Blog Tags: jquery javascript onload quick window.onLoad() Comments (0) [...]
Portraits from Photos
March 29th, 2011 at 4:48 am
91Thank you for the wonderful post. It was very useful to me.
san diego limo service
April 1st, 2011 at 2:57 am
92Article is impressive, all content is beneficial and useful for us.presentation of article is very good, so I’ll bookmark and share with my friends.Thanks
Started With jQuery From Scratch « Chocolate Lover
April 12th, 2011 at 10:39 pm
93[...] Visit Article [...]
Dorsey Lepre
April 19th, 2011 at 9:39 pm
94I am just commenting to make you be aware of of the really good encounter my wife’s child went through studying the blog. She discovered numerous pieces, which included how it is like to have a very effective teaching mindset to get most people easily comprehend some problematic issues. You truly exceeded people’s expected results. I appreciate you for supplying those invaluable, healthy, educational and in addition unique guidance on this topic to Kate.
Hotel Istanbul
April 27th, 2011 at 9:45 pm
95Uhmm I have never heard about his, very interesting. I will try this method for big sized web pages.
WangBo(China)
April 27th, 2011 at 9:53 pm
96Thinks very much!!!
It was useful to me!!!
Thinks jQuery and 15daysfojquery!
help with business plan
May 9th, 2011 at 2:36 pm
97You guys should totaly get this free offline marketing report | htttp://gr8estdeals.com/offline
15 Resources To Get You Started With jQuery From Scratch | Tut Free
May 30th, 2011 at 3:56 am
98[...] Visit Article [...]
banana cake recipes
May 30th, 2011 at 11:42 am
99I would like to show appreciation to this writer just for bailing me out of such a problem. After checking through the online world and seeing techniques which are not productive, I thought my entire life was over. Existing without the presence of solutions to the difficulties you have fixed as a result of your posting is a serious case, as well as the kind which may have in a wrong way damaged my career if I had not discovered your site. Your own skills and kindness in dealing with all the details was tremendous. I don’t know what I would have done if I hadn’t discovered such a point like this. I can at this moment look ahead to my future. Thank you so much for the professional and amazing guide. I won’t hesitate to endorse your web site to any person who needs assistance about this subject.
haye v klitschko
June 5th, 2011 at 8:43 am
100Haye V Klitschko is certainly going to be an interesting fight. Hopefully it will spark so life into the heavyweight division which has been missing as of late.Who do you think will win?
Soon Zaharek
June 18th, 2011 at 12:45 am
101LMAO ! I just found an error in your article! Check if plugins is configured the right way!
jeff bridges
June 26th, 2011 at 4:54 pm
102I’d need to check with you here. Which is not one thing I normally do! I enjoy studying a post that may make people think. Also, thanks for allowing me to remark!
Daniel Halick
July 5th, 2011 at 7:50 pm
103In related news, a caddy found a golf ball at the end of the fairway that he claimed belonged to Tiger Woods because it had a picture of his mistress on it. When questioned about it, Tiger looked at the ball with the picture and replied, “Yeah, I hit that.â€
Peliculas porno
July 12th, 2011 at 7:15 am
104Great blog, i’m going to add it to my favourites
dom z drewna
August 4th, 2011 at 3:42 am
105Awesome thing. We’ll see how this will work.
Handmade Soap Guy
August 22nd, 2011 at 6:27 am
106Thank you this is exactly what I needed. I will be reading through the rest of your tutorials and definitely adding this to my favorites.
Violet Dallam
August 28th, 2011 at 5:19 am
107Please let me know if you’re looking for a article writer for your weblog. You have some really good posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some content for your blog in exchange for a link back to mine. Please blast me an email if interested. Thank you!
kaizentr
September 22nd, 2011 at 1:53 pm
108Dies ist ein super blog.I Liebe kommenden editieren, Inhalte ist groß.
Todd Zhao
October 11th, 2011 at 9:39 pm
109Thanks .
take a look right now
November 18th, 2011 at 3:09 am
110Thank you a lot for sharing this with all folks you actually know what you’re speaking approximately! Bookmarked. Kindly also discuss with my website =). We will have a hyperlink change contract between us
Clifton Carriedo
December 23rd, 2011 at 8:49 pm
111Get fetish porn galleries and movies for free!
your free file
January 5th, 2012 at 3:27 am
112Man without woman, is head without body; woman without man, is body without head. – German Proverb
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Links
15 Days Of jQuery is proudly powered by WordPress - BloggingPro theme by: Design Disease