advertisement -- please support sponsors

gadgets, programming:
executing scripts automatically when the page is loaded

How can I make one or more scripts execute automatically after a page is loaded?

Many JavaScript-enhanced web pages have scripts that must be executed automatically when the page is loaded. A web page containing a "scrolling status bar message," for example, should be able to start scrolling the message immediately after the page has loaded, without user interaction.

There are two ways to make JavaScript code execute automatically when a page is loaded. The first method, which I call "script inlining," causes the script to be executed immediately after the script has been loaded. The second method, which involves the window object's onLoad event handler, delays execution of the script until every component of the document -- not just the script -- has been loaded. I will describe both methods in this article.

When, exactly, is a document loaded? Most browsers let you see portions of a document even before the entire document has finished loading. Netscape Navigator and Internet Explorer, for example, allow you to see a document's text while the images are still on the way. Many scripts can be safely executed before the document has been completely loaded. Other scripts, however, cannot run correctly unless the entire document, including images, is loaded before the script starts.

I will now describe two techniques for automatically executing a script on a web pages. Before deciding which one is right for your page, you must first determine when it is safe to execute your script. I'll leave that decision to you.

method 1: inlined JavaScript

If your script does not manipulate images displayed in the document, chances are that your script does not need to wait for them to finish loading. However, if your script manipulates other objects in the document, such as forms, then you should at least let the HTML finish downloading before starting the script.

To execute a script after loading the text, but perhaps before the images, simply include a "starter script" at the end of the document, as shown below: 


<html>
 <head>...header stuff...</head>
 <body>
  .
  .
  .  (document body)
  .
  .
  <script>
   start_my_script ();
  </script>
 </body>
</html>
In this example, the function start_my_script will be called immediately after the document body has been loaded. The script will not wait for images to finish loading.

method 2: the onLoad event handler

If you do not want your script to begin executing until the entire document, including images, has loaded, then you should use the window object's onLoad event handler. The code for this event handler must be included in the opening <body> tag, as shown below: 

<html>
 <head>...header stuff...</head>
 <body onLoad="start_my_script ();">
  .
  .
  .  (document body)
  .
  .

 </body>
</html>
Even though the browser sees the onLoad event handler before the document body and images are loaded, the code will not actually be executed until after the entire document, including images, has loaded.

Other than this, there is no difference between the code in this example and the code in the previous example.

multiple start-up scripts

If you need to run multiple scripts when a document is loaded, you can do so by using either or both of the above start-up techniques. Examples are shown below:
method 1: method 2: both methods: 
     .
     .
     .
     .
     .
     .
  <script>
start_script_1 ();
start_script_2 ();
  </script>
 </body>
</html>

     .
     .
     .
<body
 onLoad="start_script_1 ();
         start_script_2 ();">
     .
     .
     .
     .
     .
     .

     .
     .
     .
 <body
  onLoad="start_script_2 ();">
     .
     .
     .
  <script>
start_script_1 ();
  </script>
 </body>
</html>
Note that since a window object cannot have more than one onLoad event handler, the following code is incorrect and will result in only the first script being executed: 
     .
     .
     .
 <body onLoad="start_script_1 ();">
 <body onLoad="start_script_2 ();">
     .
     .
     .
(incorrect, do not imitate!)

Charlton Rose
March 8, 1997