Q1285 How can I display 50 images one after another, with an eight second delay between the display of one image and the next?

irt.org | Knowledge Base | JavaScript | Image | Q1285 [ previous next ]

Q1285 How can I display 50 images one after another, with an eight second delay between the display of one image and the next?

Have two images, one visible - one invisible. In the visible image first load a blank image. At the same time, start loading the first image in the sequence into the invisible image. When it has loaded, swap it into the visible image. Start loading the next image in the sequence.

Now all you need to do is add in the 8 second delay. Only swap the image is the 8 second timer has expired:

<script language="JavaScript"><!--
var timer_expired = true;
var image_loaded = false;

var i = -1;

function loaded() {
  if (i != 50) {
    if (timer_expired) {
      document.visible.src = document.hidden.src;
      image_loaded = false;
      timer_expired = false;
      setTimeout('timeout()',8000);
      document.visible.src = 'image' + (i++) + '.gif';
    }
    else {
      image_loaded = true;
    }
  }
}

function timeout() {
  timer_expired = true;
  if (image_loaded) {
    loaded();
  }
}
//--></script>

<!-- hidden image -->
<img name="hidden" src="blank.gif" width="1" height="1" onLoad="loaded()">

<!-- visible image -->
<img name="visible" src="blank.gif" width="100" height="100">

Feedback on 'Q1285 How can I display 50 images one after another, with an eight second delay between the display of one image and the next?'

• August 29, 2002 at 12:14:09: Jeff E.
• November 27, 2001 at 11:03:34: John
• 08:19:41 5/05/00 Sylvia Quesada