You are here: irt.org | FAQ | JavaScript | Image | Q1285 [ previous 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">