Rendering a chain of images like a video in javascript

Question

I\'m trying to synthesize a video using a stream of images in JavaScript. The problem is the \"video\" is either jerky, which was solved by using a buffer of sorts. However

Answer 1

Your video will almost certainly be jerky, unless the size of the images are guaranteed to be consistent in some way. And even then, the loading of the images will be dependent on the network conditions. About your problem of the script loading images faster than they are displayed, there's no way to determine the source of that, unless we get actual access to your source.

Rewriting the code using the Stack Exchange API as the image source, and monitoring activity using Firebug we can see that the network activity roughly match what we see on screen.

The code used is:

$('#buffer').load(function(){
    $('#video').attr('src', this.src);
    this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime();
}).trigger('load');

See this code working live here: http://www.jsfiddle.net/yijiang/r957s/