1

I have a looping 120-frame 30fps animation, all PNG files, and all around 600x600px. These facts are unfortunately non-negotiable, so I have to figure something out to make it work.

My script looks like this:

var path = "[[my image path]]";
var nbImages = 120;
var frames = [];

function nextFrame() {
    $("[[my image id]]").attr('src', frames[0]); 
    frames.push(frames[0]);
    frames.shift();
}

$(document).ready(function(){
    for (var x = 0; x <= nbImages; x++) { 
        frames.push(path + (x+1) + ".png"); 
    }
    setInterval(function(){ nextFrame(); }, 1000/30);
});

My issue is, of course, loading time. On the first page view, not only do the images take a million years to load, but the animation starts displaying the few loaded images as soon as they're available.

I've read up on preloading images, but I keep seeing conflicting solutions, even just for jQuery scripts. As for existing StackOverflow answers, the ones I've tried actually made the loading slower--and not just on the first visit. All the other ones didn't apply to image sequences.

- What preloading method is the most appropriate, in this case?

- What is the correct syntax to only start my animation once all images have been loaded?

Everything else works correctly.

Nils
  • 211
  • 3
  • 11
  • Never use `setTimeout` or `setInterval` for animations. – Yeldar Kurmangaliyev Oct 29 '15 at 05:25
  • _"What preloading method is the most appropriate, in this case?"_ see http://stackoverflow.com/questions/26418237/loading-images-faster-in-webpage , _"What is the correct syntax to only start my animation once all images have been loaded?"_ see http://stackoverflow.com/questions/29044852/preloading-images-in-html – guest271314 Oct 29 '15 at 05:42
  • @YeldarKurmangaliyev Could you offer an alternative and/or elaborate on the reason why? – Nils Oct 29 '15 at 12:57
  • @Nils Because `setInterval` does not guarantee that it will really execute 30 times per second. It also may hang the browser, if it is called to freqeuently. Use `requestAnimationFrame`: http://stackoverflow.com/questions/13935262/settimeout-or-setinterval-or-requestanimationframe and https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame – Yeldar Kurmangaliyev Oct 30 '15 at 03:36

0 Answers0