使用javascript以固定間隔獲取圖像URL

Question

我是一個完整的JavaScript初學者，所以我甚至不知道從哪裏開始。我有一個顯示.jpg快照的URL。它由視頻服務器提供。我想拍攝圖像並將其顯示在網頁上，圖像每2秒刷新一次。圖像將顯示在ID爲「快照」的div容器中

任何幫助或指導將不勝感激。

Answer 1

爲HTML代碼，您執行以下操作：

<div id="snapshot"><img/></div> 

然後，在JavaScript您執行以下操作：

var url = "some url somewhere"; 
var snapshotImg = document.querySelector('#snapshot > img'); 
var updateInterval = setInterval(updateImage, 2000); //start the update every 2 seconds 
updateImage(); //immediately update the image 

function updateImage(){ 
    snapshotImg.src = url + "?"+ new Date().getTime(); 
} 

在 'updateImage' 功能，我添加了一個？併爲網址添加時間哈希值，以便每次設置源時，srcurl都是唯一的。如果您每次都沒有使其唯一，那麼瀏覽器會從第一個請求中緩存圖像，並且不會更新圖像。所以，你必須使url獨一無二，並且通過在URL的末尾添加一個散列，這是任意的。我希望這是有道理的。