Rendering a chain of images like a video in javascript

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 now the problem is that images are actually downloaded far faster than they are rendered.

If you have a source of images that changes, like an IP camera you can try the example below. What I have noticed is that, the "video" still updates quite slowly, however while watching a packet sniffer I can see that the image is actually being fully retrieved far faster than it is being rendered.

Here is the example:

    <SCRIPT SRC="">
      function startVideo()
        //when the buffer image is loaded, put it in the display
          var loadedImage = $(this).attr('src');

          $('#image-displayed').attr('src', loadedImage);

            '' + Math.random());

          '' + Math.random());

      function stopVideo()
        $('#image-buffer').attr('src', '');
        $('#image-displayed').attr('src', '');
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/>
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/>
    <IMG ID="image-displayed"/>
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/>



Searching for a solution myself. Here is a nice little article about doing something amazingly convenient for IP camera case.

Also try loading all images in an image strip (CSS stuf) (assuming that there would not be a large amount of images) and hide all but first with overflow: hidden. Then change image strip position for the width of the image with setInterval (basically a very quick slider without any transition animations). In that case all images would be already loaded AND rendered and you can control timing between each "frame".


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.

alt text

The code used is:

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

See this code working live here:


I had a similar problem (in firefox-not an issue in other browsers.) In the end I litterally downloaded my movie as a filmstrip, put it it in an overflow hidden div and offset the image by the height of a frame. Saves a few k on total file size to boot! I made my filmstrip with gdlib


Instead of loading images as often as possible, you can use the window.setInterval method to make a function run at a set interval, for example ten times a second.

You can start loading the next image as soon as you have displayed an image, but instead of having the load event showing it, you can let the function that is running at an interval do that.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.