title: Rendering a chain of images like a video in javascript
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the example:</p>
  
  <pre><code>&lt;HTML&gt;
    &lt;HEAD&gt;
      &lt;SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;
      &lt;/SCRIPT&gt;
      &lt;SCRIPT&gt;
        function startVideo()
        {
          //when the buffer image is loaded, put it in the display
          $('#image-buffer').load(function()
          {
            var loadedImage = $(this).attr('src');
  
            $('#image-displayed').attr('src', loadedImage);
  
            $(this).attr('src',
              'http://path.to/image.jpg?nocache=' + Math.random());
          });
  
          $('#image-buffer').attr('src',
            'http://path.to/image.jpg?nocache=' + Math.random());
        }
  
        function stopVideo()
        {
          $('#image-buffer').unbind('load');
          $('#image-buffer').attr('src', '');
          $('#image-displayed').attr('src', '');
        }
      &lt;/SCRIPT&gt;
    &lt;/HEAD&gt;
    &lt;BODY&gt;
      &lt;BUTTON ONCLICK="startVideo();"&gt;Start Video&lt;/BUTTON&gt;&lt;BR/&gt;
      &lt;BUTTON ONCLICK="stopVideo();"&gt;Stop Video&lt;/BUTTON&gt;&lt;BR/&gt;
      &lt;IMG ID="image-displayed"/&gt;
      &lt;IMG ID="image-buffer" STYLE="visibility: hidden;"/&gt;
    &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>