5

我有一个 Axis 相机，它有多个输出，其中一个是 jpg 图像。此图像是您加载时从相机拍摄的静止图像。我想实现一种无需重新加载整个页面即可重新加载图像（每 30 秒）的方法，但是，我希望代码在更新图像之前完全下载图像以避免出现空白屏幕。

我一直在阅读，我发现最接近的是这篇文章Using AJAX / jQuery to refresh an image但不同之处在于我拥有的图像提要来自实际的相机本身而不是 php 文件。我已经尝试了几种方法来使用我的网址，但由于缺乏 javascript 知识而失败了。

我现在用来提取图像的代码只是一个简单的图像标签......

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

并且每当您刷新浏览器窗口时，它都会为您提供当前视频流的快照。

任何帮助将不胜感激！

问候，
哈维尔

4

2 回答 2

2

我在网上找不到带有令人耳目一新的图像的网络摄像头来测试它，但我认为这对你来说应该是诀窍......或者至少让你真正接近......

<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-30T22:14:44.267 回答
0

如果您正在处理一组静态图片 - 您已经知道文件名并且它不会改变 - 您最初会将所有内容加载到您的 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-01T19:31:57.220 回答