使用jQuery/ajax刷新图像Feed

Question

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

我一直在阅读,我发现最接近的是这篇文章使用AJAX/jQuery刷新图像,但区别在于我的图像提取来自实际的相机本身而不是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>