Q893 How can I replace one animated image with another, after the first animation has completed?

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

Q893 How can I replace one animated image with another, after the first animation has completed?

Some, but not all browsers trigger the images onLoad event handler for each frame of an animated image. You could utilise this to count the number of frames loaded and displayed:

<script language="JavaScript"><!--
var max = 10;
var actual = 0;

function loaded() {
    actual++;
    if (actual == max) {
        document.images['animatedImageName'].src = 'nextanimation.gif';
    }
}
//--></script>

<img src="firstanimation.gif" name="animatedImageName" onLoad="loaded()">

Feedback on 'Q893 How can I replace one animated image with another, after the first animation has completed?'

• December 03, 2002 at 13:47:21: Nermin