Continually update and replace image with jQuery

Question

I have an image that will update many times a second. I want to be able to display the updates as fast as I can. I have a bit of code already but it flickers and isn't very good. Plus it is limited to updating only twice a second. I want to be able to display faster than that if possible.

Essentially I am creating a crude video using jpeg stills. The image files are a few k max and this will run locally only - not over the Internet.

I expect I would need some kind of double buffering system but unsure how to do this in jQuery. Essentially I'd need to load an image in the background before switching it. But I cannot seem to be able to tell when the image has loaded.

Here is my code so far

<div id="vidcontent">
    <img src="" width="255" height="255" id="vidimg" />
</div>

<img src="title.png" id="title" />

<script type="text/javascript">
    $(document).ready(function()
    {
        setInterval('LoadImage();', 500 );
    });


    function LoadImage()
    {
        var img_src = "http://10.1.9.12/web/data/vid_jpg0.jpg";
        var img = $("#vidimg");

        img.attr('src', img_src+"?_t=" + (new Date()).getTime());
    }

</script>

Answer 1

You'll be much better off using <canvas> for this - the <img> tag isn't designed for animation.

Have a look at the chapter on canvas in Dive into HTML5.

Answer 2

You could try to (pre-)load the images long (minimum the time to download) before displaying them.

You get the flickering because you immediatly set the src tag of the image.

In your case I would create the pre-load object in one loop, set a timeout (about 250ms), in the timeout set the src of the img tag.

Something like this:

var latestSrc; // cache latest used img url
function LoadImage()    {        
   var cacheImg = new image();
   var img_src = "http://10.1.9.12/web/data/vid_jpg0.jpg";        
   cacheImg.src = latestSrc = img_src+"?_t=" + (new Date()).getTime());    
   window.setTimeout(function() {
     var img = $("#vidimg");        
     img.attr('src', latestSrc);     
   }, 250);
});

(Above code is not tested)