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.