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

You are here: irt.org | FAQ | JavaScript | Image | Q893 [ previous next ]

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()">

©2018 Martin Webb