Quicker Than window.onload
21
May
Posted by Jack as Tutorials
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]
67 Responses
wesley
1
Too bad that there’s all sorts of issues with it:
http://jquery.com/discuss/2006-May/001280/
Jack
2
Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
Joel Birch
3
Yes, 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.
4
The 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
5
Dustin,
As you know from my email to you, I’m a fan of yours. Great to have you stop by!
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
7
Dean,
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
8
Dean 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.
9
The 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.
10
While 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
11
Hercules,
Have you tried the latest release?
http://jquery.com/src/jquery-1.0a.jsJohn 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:
$(document).ready() has been drastically improved. It now works in all modern browsers completely as you’d expect, even with Adsense in the page.
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”.
12
I 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.
13
The 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.
14
Is this different to just using
$(function() { // onload scripts });
15
Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
16
good article
17
Great 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.
18
Great 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!?
19
Our 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.
September 11th, 2007 at 11:10 pm
20
Maybe 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
21
Can 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
September 25th, 2007 at 8:58 am
22
On Ie it works great! Thanks!
Jules
September 30th, 2007 at 12:04 am
23
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.
Jack
24
It’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.
December 19th, 2007 at 10:00 pm
25
Great article. However, I still seem to be having problems in IE6 + IE7 as it somethings does not .hide() elements at all.
January 31st, 2008 at 11:28 am
26
Very nice, This came in very handy with speeding up a site I’m working on.
27
I use jQuery in my project and Im very impressed of its abilities. I recommend jQuery for all webdevelopers.
greetings,
agencja modelek
28
How does the jQuery $(document).ready() compare to MooTools’ ‘domready’ event, or Prototype ‘dom:loaded’ ?
Brian
29
can 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..
30
I’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
31
[...] Visit Article [...]
15 Resources To Get You Started With jQuery From Scratch | Mexzhouse Design Studio
32
[...] Visit Article [...]
Jquery For Dunmmies | mashup design | pisake | web design | css | playground
33
[...] Visit Article [...]
“The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption
34
[...] Quicker Than Window.Onload()Load your Javascript before every element of the page is loaded. [...]
35
u can make ur jqurry n other stuf in html readymade here http://66lives.ueuo.com
November 18th, 2008 at 10:17 pm
36
good article!
Michael Everitt
December 15th, 2008 at 1:10 am
37
Thanks 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.
38
good!
39
On Ie it works great! Thanks!
jQuery Ö?retecek 15 Kaynak | MuGi Graphic System
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
41
Wielu 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
42
When 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.
43
Its really good for learner for basic of the Jquery. Thanks!!
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
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
46
Better 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
47
That JQuery is very good library.
meneye
48
Great article.thanks.
0 ( s?f?rdan ) Jquery Ö?reten 15 Kaynak | ONLINE SCRIPT YUVANIZ - ASP,PHP,C,JS,FLASH,AJAX..
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. [...]
50
Starting with Jquery and now i know a little bit more about the difference between document ready and window.onload
51
This 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.
52
Jquery with Opera was always a bit problematic.
53
Quicker 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 …
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.
September 23rd, 2009 at 12:09 pm
55
This works for me:
$(document).ready( function () {
alert(”test”):
});
56
I like Jqueries.
Bob
57
Arjun, why would you do that if you can do: $(function(){alert(’h');});
jack
58
when adding comments USE ENGLISH!!!! don’t just put unrelated crap so you can get a link to you pathetic website you dumb spammers!
jack
59
sorry, just to make it clear…, last comment above is not from Jack the author of the article
we are two different people
60
I have used CrossSlide Jquery plugin in my website and my website is taking too long to load.Please tell me the solution.
61
nice article! short , but good
62
I 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
63
Hi! 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.
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
65
[...] 15 Days Of jQuery [...]
Learning jQuery – Tutorial Roundup for Beginners | Duong Luat
66
[...] 15 Days Of jQuery [...]
Homeschool
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)
No comments:
Post a Comment