Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- This example is from the book _JavaScript: The Definitive Guide_. -->
<!-- Written by David Flanagan. Copyright (c) 1996 O'Reilly & Associates. -->
<!-- This example is provided WITHOUT WARRANTY either expressed or implied.-->
<!-- You may study, use, modify, and distribute it for any purpose. -->
<!-- The image that will be animated. Give it a name for convenience -->
<IMG SRC="images/0.gif" NAME=animation>
<SCRIPT>
// Create a bunch of off-screen images, and get them started
// loading the images we're going to animate.
images = new Array(10);
for(var i = 0; i < 10; i++) {
images[i] = new Image(); // Create an Image object
images[i].src = "images/" + i + ".gif"; // tell it what URL to load
}
// Later, when we want to perform our animation, we can use these URLs,
// knowing that they've been loaded into the cache. Note that we perform
// the animation by assigning the URL, not the Image object itself.
// Also note that we call the image by name, rather than as document.images[0]
function animate()
{
document.animation.src = images[frame].src;
frame = (frame + 1)%10;
timeout_id = setTimeout("animate()", 250); // display next frame later
}
var frame = 0; // keep track of what frame of the animation we're on.
var timeout_id = null; // allows us to stop the animation.
</SCRIPT>
<FORM> <!-- Buttons to control the animation -->
<INPUT TYPE=button VALUE="Start"
onClick="if (timeout_id == null) animate()">
<INPUT TYPE=button VALUE="Stop"
onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
</FORM>