From HTML body onload to jQuery Factory Function Shorthand


As you continue implement user interface logic in your Web Application you’ll be coding in JavaScript and you’ll eventually encounter a scenario where you want to execute some JavaScript code when your web page is loaded. Working with jQuery you’ll discover this scenario immediately.

One of my teammates was asking be about web page loading events and jQuery Syntax so I though others might benefit from an explanation of the onload / ready syntax as well as an example of jQuery shorthand.

The native way of doing this is to wire up an event handler (function) for the onload event of the html element.


<!DOCTYPE html>
<html>
<head>

<script type='text/javascript'>
 function SomeFunction() {
 alert('I was run at startup !');
 }
</script>

<title>Sample Page</title>

</head>

onload='SomeFunction()'>
   My Web Page !
</body>

</html>

This works, but it’s not perfect.

There are a few less than optimal attributes of the body onload event.

  1. The onready event does not fire when the DOM is completely “READY” (like the jQuery “ready” event does) if fires when the DOM is completely “LOADED”. This might seem like a minor distinction but in practice it’s not. The DOM is ready before all of its referenced objects may be loaded. That is, for example, if the DOM contains references to a number of large image files (media files, etc), the “onload” event will not fire until all those images have been downloaded. The jQuery “ready” event fires sooner. After the DOM is ready but not waiting for all those images, etc to be downloaded. Sometimes you need the “onload” event. For example, if I needed to do something based on the dimensions of the images on the page. When the DOM is “ready” and the jQuery “load” event fires the image may not be downloaded and the dimensions of the image may not yet be available. Normaly using jQuery ready() will be more performant.
  2. The documant’s onload event handler declaration is “inline” JavaScript…. Yuck. I could instead use window.onload = SomeFunction; but doing so would supercede any function specified in the onload event specifier.
  3. .onload (whichever way you assign it) can only hold a reference to a single JavaScript function. The jQuery Load Handler does not. I can have multiple .load() sections in my code (even including some dynamically) and jQuery will handle this seamlessly. Each .ready() will simple be added to an internal queue of behaviors that will be executed when the DOM is “ready”.

Hopefully those features make it obvious that you should use .ready() whenever you don’t specifically NEED the behavior of window/body onload.

So, lets look at the jQuery way.

I’ll show you four different versions of an HTML page that all do the same thing.

Each one demonstrates a shorter and shorter version of the jQuery syntax, thereby demonstrating the elegance of the syntax options.

One reason that it’s useful to commit the longhand form to memory is that you could use the longhand version if you needed to eliminate any name-space conflicts with other JavaScript libraries.

Lets have a look.

1.)


<!DOCTYPE html>
<html>
<head>

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
        type='text/javascript'></script>
<script type='text/javascript'>

jQuery(document).ready(SomeFunction());

 function SomeFunction() {
 alert('I was run at startup !');
 }

</script>

<title>Sample Page</title>
</head>

<body>
   My Web Page !
</body>
</html>


2.)


<!DOCTYPE html>
<html>
<head>

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
        type='text/javascript'></script>
<script type='text/javascript'>

$().ready(SomeFunction());

 function SomeFunction() {
 alert('I was run at startup !');
 }

</script>

<title>Sample Page</title>
</head>

<body>
   My Web Page !
</body>

</html>

3.)


<!DOCTYPE html>
<html>
<head>

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
        type='text/javascript'></script>
<script type='text/javascript'>

$().ready(function()
{
 alert('I was run at startup !');
});

</script>

<title>Sample Page</title>
</head>

<body>
   My Web Page !
</body>

</html>

4.)


<!DOCTYPE html>
<html>
<head>

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
        type='text/javascript'></script>

<title>Sample Page</title>
</head>

<body>

<script type='text/javascript'>

$(function()
{
 alert('I was run at startup !');
});

</script>

   My Web Page !

</body>
</html>

Notice the subtle differences until we get to the last and most concise version ?