Learn Advanced JavaScript Programming

onLoad

The onLoad event handler is triggered when an image is displayed. Do not confuse displaying an image with loading one. You can load several images and then, by setting the instance’s src property, you can display them one by one, in the same Image object instance. If you change a displayed image this way, the onLoad event handler executes every time an image is displayed, not only when the image is loaded into memory.

If you specify an onLoad event handler for an Image object that displays a looping gif animation (multi-image gif), each loop of the animation triggers the onLoad event, and the event handler executes once for each loop.

By repeatedly setting the src property of an image’s JavaScript reflection, you can use the onLoad event handler to create a JavaScript animation.

Demonstration 1: Up-to-date Digital Clock

The following JavaScript script displays a digital clock on your page, updated every minute. The clock includes two digits for the hour, delimiting colon, two digits for the minute, and am/pm subscript:

<HTML>
<HEAD>
<TITLE>
JavaScript clock
</TITLE>
</HEAD>
<BODY>
<!-- JavaScript immediate script -->
<SCRIPT LANGUAGE="JavaScript">
<!--

// Copyright 1997 -- Tomer Shiran

// create array of all digit images
var digit = new Array()
digit[0] = new Image(16, 21)
digit[1] = new Image(16, 21)
digit[2] = new Image(16, 21)
digit[3] = new Image(16, 21)
digit[4] = new Image(16, 21)
digit[5] = new Image(16, 21)
digit[6] = new Image(16, 21)
digit[7] = new Image(16, 21)
digit[8] = new Image(16, 21)
digit[9] = new Image(16, 21)
digit[10] = new Image(16, 21) // am
digit[11] = new Image(16, 21) // pm
digit[12] = new Image(9, 21) // colon
digit[13] = new Image(9, 21) // blank

// assign sources to digit image objects (0 - 9)
for (var i = 0; i < 10; ++i) {
   digit[i].src = getPath(location.href) + "dg" + i + ".gif"
}

// assign sources to other image objects
digit[10].src = getPath(location.href) + "dgam.gif"
digit[11].src = getPath(location.href) + "dgpm.gif"
digit[12].src = getPath(location.href) + "dgc.gif"
digit[13].src = getPath(location.href) + "dgb.gif"

// set initial time values to impossible ones
var hour1 = getHour(0)
var hour2 = getHour(1)
var minute1 = getMinute(0)
var minute2 = getMinute(1)
var ampm = getAmpm()
var colon = false

// get array substring of first clock image in document.images array
var start = document.images.length // number of images in document
// print initial clock
var openImage = "<IMG SRC=\"" + getPath(location.href) + "dg"
var closeImage = ".gif\" HEIGHT=21 WIDTH=16>"
document.write(openImage + hour1 + closeImage)
document.write(openImage + hour2 + closeImage)
document.write(openImage + "c.gif\" HEIGHT=21 WIDTH=9>")
document.write(openImage + minute1 + closeImage)
document.write(openImage + minute2 + closeImage)
document.write(openImage + ((ampm == 10) ? "am" : "pm") + closeImage)

var timerID = null
var timerRunning = false

update()

function setClock() {
  if (getHour(0) != hour1) { // not getHours()!
 hour1 = getHour(0)
 document.images[start].src = digit[hour1].src
  }
  if (getHour(1) != hour2) { // not getHours()!
 hour2 = getHour(1)
 document.images[start + 1].src = digit[hour2].src
  }
  colon = !colon
  if (!colon)
 document.images[start + 2].src = digit[13].src
  else
 document.images[start + 2].src = digit[12].src
  if (getMinute(0) != minute1) { // not getMinutes()!
 minute1 = getMinute(0)
 document.images[start + 3].src = digit[minute1].src
  }
  if (getMinute(1) != minute2) { // not getMinutes()!
 minute2 = getMinute(1)
 document.images[start + 4].src = digit[minute2].src
  }
  if (getAmpm() != ampm) {
 ampm = getAmpm()
 document.images[start + 5].src = digit[ampm].src
  }
  timerID = setTimeout("setClock()",1000)
  timerRunning = true
}

function update() {
  stopClock()
  setClock()
}

function stopClock() {
  if (timerRunning)
 clearTimeout(timerID)
  timerRunning = false
}

function getHour(place) {
  var now = new Date()
  var hour = now.getHours()
  if (hour >= 12)
 hour –= 12
  hour = (hour == 0) ? 12 : hour
  if (hour < 10)
 hour = "0" + hour // do not parse number!
  hour += ""
  return parseInt(hour.charAt(place))
}

function getMinute(place) {
  var now = new Date()
  var minute = now.getMinutes()
  if (minute < 10)
 minute = "0" + minute // do not parse number!
  minute += ""
  return parseInt(minute.charAt(place))
}
function getAmpm() {
  var now = new Date()
  var hour = now.getHours()
  if (hour >= 12)
 return 11 // pm
  /* else */
 return 10 // am
}

function getPath(url) {
  lastSlash = url.lastIndexOf("/")
  return url.substring(0, lastSlash + 1)
}

// -->
</SCRIPT>
</BODY>
</HTML>

Example 25-6. An updating clock.

Global Statements

The script starts by creating the digits array, holding 14 instances of the Image object, for the digits 0 through 9, AM, PM, colon, and blank symbols. All images are 21 pixels high and 16 pixels wide, except for the colon and the blank images which are thinner (9 pixels):

// create array of all digit images
var digit = new Array()
digit[0] = new Image(16, 21)
digit[1] = new Image(16, 21)
digit[2] = new Image(16, 21)
digit[3] = new Image(16, 21)
digit[4] = new Image(16, 21)
digit[5] = new Image(16, 21)
digit[6] = new Image(16, 21)
digit[7] = new Image(16, 21)
digit[8] = new Image(16, 21)
digit[9] = new Image(16, 21)
digit[10] = new Image(16, 21) // am
digit[11] = new Image(16, 21) // pm
digit[12] = new Image(9, 21) // colon
digit[13] = new Image(9, 21) // blank

Since the artistic representation of each symbol is given in a gif format, we assign a gif filename to the src property of each element of the digit array. The gif files are located in the same directory as the URL, and the naming algorithm is based on concatenating the “dg” substring to the characters represented by the image (0-9, am, pm). The colon symbol is denoted by a “c” character, and the “blank” one by a “b.”

// assign sources to digit image objects (0 - 9)
for (var i = 0; i < 10; ++i) {
  digit[i].src = getPath(location.href) + "dg" + i + ".gif"
}
// assign sources to other image objects
digit[10].src = getPath(location.href) + "dgam.gif"
digit[11].src = getPath(location.href) + "dgpm.gif"
digit[12].src = getPath(location.href) + "dgc.gif"
digit[13].src = getPath(location.href) + "dgb.gif"

Then, we find the current time and store it in six variables, four digits for the hour and minute, one for the ampm value, and one Boolean variable for the blinking colon. After initializing the time variables, the script turns off the colon, ready to be turned on next time:

// set initial time values to current time
var hour1 = getHour(0)
var hour2 = getHour(1)
var minute1 = getMinute(0)
var minute2 = getMinute(1)
var ampm = getAmpm()
var colon = false

We need to probe and remember the number of images already displayed in the document:

// get array substring of first clock image in document.images array
var start = document.images.length // number of images in document

Table of Contents