使用 jQuery/ajax 刷新图像提要

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/

祝你好运！