代码之家  ›  专栏  ›  技术社区  ›  Chris

用jquery不断更新和替换图像

  •  1
  • Chris  · 技术社区  · 14 年前

    我有一个每秒更新多次的图像。我希望能够尽快显示更新。我已经有一些代码了,但是它会闪烁,而且不是很好。另外,它仅限于每秒更新两次。如果可能的话,我希望能够显示得比这更快。

    从本质上讲,我正在使用jpeg stills创建一个粗糙的视频。图像文件的最大值为几K,只能在本地运行,不能在Internet上运行。

    我希望我需要某种双缓冲系统,但不确定如何在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>
    
    2 回复  |  直到 13 年前
        1
  •  2
  •   µBio    13 年前

    你最好用 <canvas> 为此 <img> 标签不是为动画设计的。

    看一看 the chapter on canvas 在里面 Dive into HTML5 .

        2
  •  0
  •   GvS    14 年前

    在显示图像之前,您可以尝试(预)长时间加载图像(最短下载时间)。

    您得到闪烁是因为您立即设置了图像的SRC标记。

    在您的例子中,我将在一个循环中创建预加载对象,设置一个超时(大约250毫秒),在超时中设置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);
    });
    

    (以上代码未测试)