使用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的末尾添加一个散列，这是任意的。我希望这是有道理的。