The usual syntax for setting up your jquery script in any page looks like this, using the 'document.ready' statement to launch all your stuff as soon as the page loads:

<script type='text/javascript'>
$(document).ready(function() {
// all your jquery stuff goes here
});
</script>

This is great, better than window.onload or body.onload, since it runs before any images or other files have finished downloading to the browser. However...  there are times when this is not so great, i.e. my latest attempt at my own 'equal columns' script.

First, I had this:

<script type='text/javascript'>
$(document).ready(function() {
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
$('#rightCol').height(lh);
} else {
//alert('right : ' + rh);
$('#mainCol').height(rh);
}
});
</script>

Using the dimensions plugin (which is now a part of the main jquery library as of the latest release), this script gets the height of the 'rightCol' and the 'mainCol', figures out which one is a greater number, and assigns that number as the height of the other column.

works great - unless you happen to have images loaded in either column that do not have a specified height attribute.

In my case, I was loading a full column of large thumbnails in the rightCol div, and since jquery was firing before the page was fully loaded, firefox was reporting the height of the images as 'null', which caused all kinds of problems - the most important of which was that the columns were equal to the *shorter* column length... oops.

(note the alerts in the script comments - remove the // to see which of your columns is showing as longer)
 
Along comes jQuery's simple load() method, to the rescue!

by simply wrapping all my jquery goodness in
$(window).load(function()....
and then calling that function as part of the usual 'document.ready',
everything seems just fine... the columns are equal, since the script to fix the height is loading *after* the images have loaded to the page.

This causes a slight bit of 'motion' as the page is loading, but on the longer pages it is below the first screen height, and is very quick anyway.

**NOTE: edited 10/7/08 - it works better with just the window.load statement, no document.ready handler wrapped around it

<script type='text/javascript'>
$(document).ready(function() {
$(window).load(function(){
var lh = $('#mainCol').height();
var rh = $('#rightCol').height();
if (lh >= rh){
//alert('left : ' + lh);
$('#rightCol').height(lh);
} else {
//alert('right : ' + rh);
$('#mainCol').height(rh);
};
});
});
</script>