Question

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

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

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

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

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

非常感谢任何帮助！

的问候，
哈维尔

Answer 1

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

<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>

Answer 2

如果您正在使用一组静态图片 - 您已经知道文件名并且它不会改变 - 您最初会将所有内容加载到您的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/

祝你好运！

使用jQuery / ajax刷新图像Feed

2 个答案: