window.onload = function ()
This is all well and good and appears to do exactly what you want it to, however it's certainly not perfect.
If you have a webpage that is just text and a few small images, you wont see the problem, however, when your webpages start to get bigger, it will definately be noticable.
Along Comes Jquery
Now onto the solution using Jquery:
The above code uses some special jquery syntax that you may not be familiar with, in another article I explain what jquery is and go over the syntax, for now I'll just explain what the code is doing.
The above code simply waits for the DOM to finish loading and then executes, this means that it will just wait for the DOM tree to load which has placeholders for every element on the page, and not wait for the elements themselves to load.
So if you were to run the code above, it wouldn't wait for the large images to load, it will just wait until the DOM is available to be acted upon, which is far quicker.
Let's go over each element of the above to to understand what it's doing.
The first part of the code is using jquery to call upon the document, in preparation of doing something to it.
You will probably recognize the above, it's just a simple function without a name.
You can see on the last line of code that there is a rounded bracket within the function, this is simply the 2nd rounded bracket of the ready() function, so everything before that rounded bracket is contained within the ready function.
Then we have a curley bracket and a semi colon to end the unnamed function.
By: Stephen Warren