animation ESS

by Mike Gleeson

HTML

<div>
    <img id="Animation" src="eSS_Login_enter0001.png"/>
</div>

JavaScript

var images = {};

for(var i = 1; i < 51; i++)
{
    if(i < 10)
        images[i] = "eSS_Login_enter000"+i+".png";
    else
        images[i] = "eSS_Login_enter00"+i+".png";
}

function preloadImages() {
    for (i=0; i < frames; i++) {
        images[i] = new Image();
        images[i].onload = function() {
            loaded_images += 1;
            checkLoadingFinished();
        }
        images[i].src = 'frame-' + i + '.jpg';
    }
}

function checkLoadingFinished() {
    if (loaded_images >= frames) {
        startAnimation();
    }
}

preloadImages();

var frame = 1;

function startAnimation() {
    setTimeout(function(){
      $("#Animation").attr('src', images[frame]);
      frame++;
      if(frame != 51)
        startAnimation();
    }, 42);
}