不斷更新和替換圖像與jQuery

我有一個圖像，將更新多次每秒。我希望能夠儘快顯示更新。我已經有了一些代碼，但它閃爍並且不太好。另外它僅限於每秒更新兩次。如果可能，我希望能夠顯示得更快。不斷更新和替換圖像與jQuery

本質上，我使用jpeg劇照創建了一個原始視頻。圖像文件最多隻有幾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>

來源

2010-09-27 Chris

你會使用<canvas>這個好得多 - 在<img>標籤是不適合動畫。

看一看the chapter on canvas在Dive into HTML5。

來源

2010-09-27 13:10:59 Skilldrick

什麼特別我應該看看。我以前從未使用過畫布 – Chris 2010-09-27 13:14:06

是的，請看圖像部分。 – Skilldrick 2010-09-27 13:16:08

這很好，謝謝。 – Chris 2010-09-27 13:41:52

在顯示圖像之前，您可以嘗試（預先）加載圖像（最少下載時間）。

由於立即設置圖像的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); 
});

（上面的代碼未測試）

來源

2010-09-27 13:25:48 GvS

不斷更新和替換圖像與jQuery

回答

相關問題