alt
MakeAGreatSite.com

How To Execute Javascript When the Document Is Ready


The old method of loading javascript code and functions on page load was the following:

window.onload = function ()
{
Javascript code goes here
}

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.
The above code waits for EVERYTHING on the page to load before any of your javascript is executed, in some situations this is desireable, but for most scenarios there is a much better solution.

Along Comes Jquery

Jquery is a javascript library with the slogan "The write less do more Javascript library", and it does just that. Allows you to write less code while achieving more and with less effort I might add.
I should probably mention that you don't have to use jquery to solve the above problem, but it's much, much easier than doing it with pure javascript, and the downside? A measly 19kb filesize for the library I believe, I can certainly say that the benefits outweight any downside you can think of.

Now onto the solution using Jquery:

$(document).ready(function(){
javascript code goes here
)};

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 problem we had was that our javascript code was waiting for the entire page to load including all images before it would execute.
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.

$(document)

The first part of the code is using jquery to call upon the document, in preparation of doing something to it.

.ready()

This is telling the browser to execute the javascript code in the brackets after the word "ready" (Which is an unnamed function in our example) when the document is ready.

function(){
javascript code goes here
)};

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.

Any javascript code you included between the curley brackets of the unnamed function will execute on page load.


Related Pages: