Quicker Than window.onload
21 May 2006 | Tutorials | 34 Comments
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.
Technorati Tags: jQuery, DOM, javascript, window.onload
Subscribe
34 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
Too bad that there’s all sorts of issues with it:
http://jquery.com/discuss/2006-May/001280/
Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
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.
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
Dustin,
As you know from my email to you, I’m a fan of yours. Great to have you stop by!
> 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.
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)?
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.
The 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.
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 :/
Hercules,
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”.
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.
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.
Is this different to just using
$(function() { // onload scripts });Wesley,
From what I’ve read, it seems to be limited to situations where there is a document.write in the code.
good article
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.
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!?
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.
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
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
On Ie it works great! Thanks!
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.
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.
Great article. However, I still seem to be having problems in IE6 + IE7 as it somethings does not .hide() elements at all.
Very nice, This came in very handy with speeding up a site I’m working on.
I use jQuery in my project and Im very impressed of its abilities. I recommend jQuery for all webdevelopers.
greetings,
agencja modelek
How does the jQuery $(document).ready() compare to MooTools’ ‘domready’ event, or Prototype ‘dom:loaded’ ?
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..
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.
[…] Visit Article […]
[…] Visit Article […]
[…] Visit Article […]
[…] Quicker Than Window.Onload()Load your Javascript before every element of the page is loaded. […]