Постоянно обновляйте и заменяйте изображение на jQuery

Question

У меня есть изображение, которое будет обновляться много раз в секунду.Я хочу отображать обновления так быстро, как только могу.У меня уже есть немного кода, но он мерцает и не очень хорошо.Плюс это ограничено обновлением только два раза в секунду.Я хочу иметь возможность отображать быстрее, чем это, если это возможно.

По сути, я создаю грубое видео с использованием фотографий JPEG.Размер файлов изображений не превышает несколько k, и они будут работать только локально - не через Интернет.

Я ожидаю, что мне понадобится какая-то система двойной буферизации, но не знаете, как это сделать в jQuery.По сути, мне нужно загрузить изображение в фоновом режиме, прежде чем переключать его.Но я не могу сказать, когда изображение загрузилось.

Вот мой код

<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

Для этого вам будет гораздо лучше использовать <canvas> - тег <img> не предназначен для анимации.

Взгляните на главу на холсте в Погрузитесь в HTML5 .

Answer 2

Вы можете попытаться (предварительно) загрузить изображения долго (минимальное время для загрузки) перед их отображением.

Вы получаете мерцание, потому что вы сразу устанавливаете тег src изображения.

В вашем случае я бы создал объект предварительной загрузки в одном цикле, установил тайм-аут (около 250 мс), в тайм-ауте установил src тега img.

Примерно так:

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);
});

(вышеуказанный код не проверен)