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>标记不适用于动画。

查看the chapter on canvas中的Dive into HTML5。

Answer 2

您可以尝试（预先）加载图像（最短下载时间），然后再显示它们。

你得到了闪烁，因为你立即设置了图像的src标签。

在你的情况下，我会在一个循环中创建预加载对象，设置超时（约250ms），在超时时设置img标记的src。

这样的事情：

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

（以上代码未经过测试）

用jQuery不断更新和替换图像

2 个答案: