Lag In Animated Image Array

I'm working on a looping animation (like an animated GIF) made from an ever-changing array of images (based on this.) The animation advances via a changing image class. Here's wh

Solution 1:

For animation in Javascript it is often easier to use a setTimout rather than setInterval. It's better to have one function that continuously calls a function that implements the animation rather than drive the animation with multiple setIntervals.

Javascript would look like this:

$("#ball").html("<img src='" +images[0] +"'>").show()
setInterval(setImage, 50);

functionsetImage() {
  var next=newImage()
  images.push(images.shift())
  next.onload=function(){
    $("#ball img").attr("src", this.src)
  }
  next.src= images[0]   
}  

Here is a working fiddle. I wasn't able to tell if there was any conspicuous delay.

https://jsfiddle.net/4bb0wwsz/

Solution 2:

Thanks for your help, I ended up taking Rob Scott's advice and switched to css animation for the flashing effect, still using jquery for the image advancement.

css:

img {
width:0;
height:0;
position:absolute;
top:0;
left:0;
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(1, end);
}

.first, .second, .third, .fourth, .fifth {
display:block;width:100%;height:auto;}

.first {-webkit-animation-delay:0s;}
.second {-webkit-animation-delay:0.2s;}
.third {-webkit-animation-delay:0.4s;}
.fourth{-webkit-animation-delay:0.6s;}
.fifth{-webkit-animation-delay:0.8s;}

@-webkit-keyframes flash {0% {opacity: 1;}20% {opacity: 0;}100% {opacity: 0;}}

js:

// MOVE FORWARD 
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

setInterval(function(){ 
$('.fourth, .third, .second, .first').attr('class','');
$('.fifth').removeClass('fifth').next().addClass('fifth');
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

},10000);

http://jsfiddle.net/milpool/et05pvw5/