onLoad

Executes JavaScript code when a load event occurs; that is, when the browser finishes loading a window or all frames within a FRAMESET tag.

Event handler for
Image, Layer, Window

Implemented in
Navigator 2.0
Navigator 3.0: event handler of Image

Syntax

onLoad="handlerText"

<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>

Example 2: Display alert when image loads. The following example creates two Image objects, one with the Image constructor and one with the IMG tag. Each Image object has an onLoad event handler that calls the displayAlert function, which displays an alert. For the image created with the IMG tag, the alert displays the image name. For the image created with the Image constructor, the alert displays a message without the image name. This is because the onLoad handler for an object created with the Image constructor must be the name of a function, and it cannot specify parameters for the displayAlert function.

<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"

function displayAlert(theImage) {
   if (theImage==null) {
      alert('An image loaded')
   }
   else alert(theImage.name + ' has been loaded.')
}
</SCRIPT>

<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top"
   onLoad=displayAlert(this)><BR>

Example 3: Looping GIF animation. The following example displays an image, birdie.gif, that is a looping GIF animation. The onLoad event handler for the image increments the variable cycles, which keeps track of the number of times the animation has looped. To see the value of cycles, the user clicks the button labeled Count Loops.

<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0
   onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops"
   onClick="alert('The animation has looped ' + cycles + ' times.')">

Example 4: Change GIF animation displayed. The following example uses an onLoad event handler to rotate the display of six GIF animations. Each animation is displayed in sequence in one Image object. When the document loads, !anim0.html is displayed. When that animation completes, the onLoad event handler causes the next file, !anim1.html, to load in place of the first file. After the last animation, !anim5.html, completes, the first file is again displayed. Notice that the changeAnimation function does not call itself after changing the src property of the Image object. This is because when the src property changes, the image's onLoad event handler is triggered and the changeAnimation function is called.

<SCRIPT>
var whichImage=0
var maxImages=5

function changeAnimation(theImage) {
   ++whichImage
   if (whichImage <= maxImages) {
      var imageName="!anim" + whichImage + ".gif"
      theImage.src=imageName
   } else {
      whichImage=-1
      return
   }
}
</SCRIPT>

<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top"
   onLoad="changeAnimation(this)">

Event handler for	`Image`, `Layer`, `Window`
Implemented in	Navigator 2.0 Navigator 3.0: event handler of `Image`

type	Indicates the type of event.
target	Indicates the object to which the event was originally sent.
width, height	For an event over a window, but not over a layer, these represent the width and height of the window.

onLoad

Syntax

Parameters

Description

Event properties used

Examples

See also