使用jQuery/ajax更新圖像傳輸

我有一個Axis相機，它有多個輸出，其中一個是jpg圖像。該圖像在加載時仍然是從相機拍攝的。我想實現一種圖像重載（每30秒）的方式，而無需重新加載整個頁面，但是，我希望代碼在更新之前完全下載圖像以避免出現空白屏幕。使用jQuery/ajax更新圖像傳輸

我一直在閱讀，最近發現的是這個帖子Using AJAX/jQuery to refresh an image，但不同的是，我有的圖像飼料是來自實際相機本身而不是一個PHP文件。我已經嘗試了幾種方法來使這個工作與我的網址，但我失敗了，由於缺乏JavaScript知識。

我現在使用拉上了圖像的代碼只是一個簡單的圖像標籤...

<img src="[camera ip]/jpg/1/image.jpg">

，並刷新瀏覽器窗口，任何時候它給你的快照當前視頻流。

任何幫助將不勝感激！

問候，
哈維爾

來源

2012-11-01 Javier

好的，你能舉個例子嗎？它每30秒加載一個不同的圖像嗎？解釋你想讓代碼看起來如何 – Ibu

你將要進入的所有圖像的格式是什麼？相機是否不斷更新相同的image.jpg？ –

圖片供稿永遠不會改變，它始終與我在原始文章中提供的網址完全相同，無論何時刷新瀏覽器，它都會爲您提供新圖片，但我決定只保留30秒的時間間隔。這不是它提供的隨機圖像，它只是相機當前流式傳輸的快照。 – Javier

我不能提神圖像在網上找到一個攝像頭，以測試這種反對，但我認爲這應該以招你...或者至少讓你真正接近...

<script> 
// URL to your cam image 
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg'; 

var buffer = {}; 
function preload() { 
    buffer = new Image(); 
    // attaching the seconds breaks cache 
    buffer.src = cam_image + '?' + (new Date()).getTime(); 
    buffer.onload = function() { 
     setTimeout(preload, 30000); // 30 seconds refresh 
     document.getElementById('myimg').src = buffer.src; 
    } 
} 
preload(); 
</script>

來源

2012-11-30 22:14:44

我試圖從小的JavaScript知識，我有，這是有道理的，它實際上是最接近我去過讓它工作。圖像拉起，瀏覽器加載帶有時間戳的新圖像，但是，它永遠不會重新加載。以下是可用於測試此示例的示例圖像源http://absdev.ws:8000/jpg/1/image.jpg – Javier

我在之前編寫的代碼中遇到了一些小錯誤。我編輯了上面的代碼。你應該會發現它現在可以工作。 –

工程很美，謝謝先生！ – Javier

如果您正在使用的圖片的靜態組工作 - 你已經知道文件名，並且它不會改變 - 你將一切加載到您的HTML開始（即解決了黑屏關注），然後使用jquery插件按照指定的時間間隔旋轉/刷新圖像，不管是30秒還是其他任何內容。

所以，你的HTML代碼將是這個樣子：

<ul> 
    <li><img src="[camera ip]/jpg/1/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/2/image.jpg"></li> 
    <li><img src="[camera ip]/jpg/3/image.jpg"></li> 
    ... 
</ul>

然後是將插件循環它們。

對於插件，使用這兩種中的一種：

http://nivo.dev7studios.com/

http://jquery.malsup.com/cycle/

祝你好運！

來源

2012-11-01 19:31:57 Brett

Brett，圖片Feed的地址永遠不會改變。循環插件有我正在尋找的一些功能，但我認爲這些腳本對於我正在嘗試完成的內容來說太重了。 – Javier

沒有廣泛的JavaScript知識，你將不得不使用jQuery插件 – Brett

使用jQuery/ajax更新圖像傳輸

回答

相關問題