Question

我的图片会从本地网络摄像头源不断更新，然后显示在网站上。我可以显示图像，刷新页面图像会更新（显然）。

我想知道的是，我怎样才能每隔5个秒更新一次这个图像，而不必手动刷新页面（即使用ajax）。

基本的事情我不太确定：

<img src=""/>＆lt; ---如何加载位于javascript代码中的图片网址
在javascript代码中，如何创建一个自动更新图片源的功能，而无需重新加载页面

据我所知，在阅读时，其中一个主要问题是浏览器会加载缓存的图像，除非每次产生的httprequest看起来不同，因此我需要在url字符串中添加一个额外的项目（即www.yoursire.com?image=foo&date=bar（日期被日期函数或其他一些迭代值抓取））以避免这种可怕的浏览器倾向？

提前致谢！

Answer 1

无需编写所有代码

查看javascript函数setTimeout()和setInterval()

很容易更改ana元素的src属性

document.getElementbyId("imageId").setAttribute("src", imageUrl);

如果您的图像请求网址每次都相同（但图片已更改服务器端），您可以在ajax请求标头中添加“no-cache”，或者可以将随机查询字符串添加到图像强制每次重新加载（例如http://mydomain/myimage?3754854）

Answer 2

使用jQuery：

    $(document).ready(function() {
       window.setInterval("refreshCamera();", 1000); // one second interval
    });

    var url = 'http://www.x.com/abc?refresh=';
    var forcerefresh = 0;

    function refreshCamera()
    {
       forcerefresh = forcerefresh + 1;
       $('#myImageId').attr('src',url + forcerefresh);


}

（强制刷新的事情是阻止浏览器使用本地缓存的图像）

Answer 3

我已经完成了这项工作，它可以使用设置图像源。同样在服务器端，您必须发送无缓存HTTP标头以防止缓存。

<img src="" id="webcam" />
<script type="text/javascript">

var int=self.setInterval("reload()",1000);

function reload(){
   $("#webcam").attr("src", "/mysite/webcamImage");
}

</script>

Answer 4

您可以使用jquery加载图像对象，然后附加计时器并每隔5秒运行一次代码。

以下是一个例子：

// when the DOM is ready
$(function () {
  var img = new Image();

  // wrap our new image in jQuery, then:
  $(img)
    // once the image has loaded, execute this code
    .load(function () {
      // set the image hidden by default    
      $(this).hide();

      // with the holding div #loader, apply:
      $('#loader')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);

      // fade our image in to create a nice effect
      $(this).fadeIn();
    })

    // if there was an error loading the image, react accordingly
    .error(function () {
      // notify the user that the image could not be loaded
    })

    // *finally*, set the src attribute of the new image to our image
    .attr('src', 'images/headshot.jpg');
});

在这里阅读更多相关信息：

http://jqueryfordesigners.com/image-loading/

关于阻止动态加载图像的缓存，您只需在网址中添加最后修改的时间戳：

<img src="image.jpg?lastmodified=1291235678" ...

Answer 5

我有同样的需求，所以我在下面附加我自己的js解决方案。有时我们的网络摄像头会在发生ajax刷新时将jpg写入目录，因此我没有显示损坏的图像，而是呈现GIF动画。

JS：

<script>
$(document).ready(function () {
    (function () {
        // show webcam jpg on initial page load
        var refreshWebcam = function () {
            // webcam link is appended with a timestamp to prevent caching
            var webcamImg = 'http://abs_path_to_webcam_img/webcam1.jpg' + '?' + (new Date()).getTime();
            var loadingImg = 'http://abs_path_to_webcam_loading_img.gif'
            $.ajax({
                url: webcamImg,
                type: 'HEAD',
                error: function () {
                    $('#refresh').attr('src', loadingImg);
                    //console.log('failed loading ' + webcamImg);
                    // if there's an error, retry loading image every half second
                    setTimeout(function () {
                        refreshWebcam();
                    }, 500)
                },
                success: function () {
                    $('#refresh').attr('src', webcamImg);
                    //console.log('successfully loaded ' + webcamImg);
                }
            });
        };
        // refresh webcam jpg every 5 seconds
        window.setInterval(refreshWebcam, 5000);
        refreshWebcam();
    })();
});

<强> HTML

<img alt="Web Camera Image" id="refresh" src="http://abs_path_to_webcam_loading_img.gif" />

Answer 6

禁用缓存会使您的网络摄像头（即使是好的）受到影响

我尝试允许将图像缓存6秒（Cache-Control：max-age = 6），因为我需要防止网络摄像头被淹没。我正在使用的代码看起来有点像这样，但它有一个问题：

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" /><br />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg';
    }, 6000);
}());
</script>

以前，网络开发人员已经将？rand =（随机数）作为缓存破坏技术。当图像是可缓存的时（即使只是很短的一段时间），这很糟糕，因为如果你可以（取决于你的缓存是否会将查询参数视为不可缓存），则意味着你的缓存命中率非常低并且你会建立很多页面表示。

问题是图像现在没有刷新，因为虽然重新分配了src属性，但它实际上并没有更改为其他值，因此浏览器（Chrome 51）没有更新图像。我将逻辑更改为具有?1或?2查询字符串参数，并在它们之间交替。

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg?1" /><br />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        if (myImageElement.src == 'http://example.com/webcams/suddenlypopular.jpg?1') {
            myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?2';
        } else {
            myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?1';
        }
        myLogElement.innerHTML = myImageElement.src;
    }, 6000);
}());
</script>

编辑：虽然这适用于Chrome和IE，但它在Firefox中不起作用，因此我想出了一个可在Chrome，Firefox和IE中使用的替代解决方案（Safari目前尚未经过测试）。

<img alt="Webcam image of something popular" id="liveimage" src="http://example.com/webcams/suddenlypopular.jpg" />
<script type="text/javascript">
(function() {
    setInterval(function() {
        var myImageElement = document.getElementById('liveimage');
        var d = new Date();
        // 6000 is 6 seconds; the desired refresh rate
        // % n is a bit of an experiment for being nice on cache invalidation; it also puts a bound on how out-of-date something would be regarding clock skew.
        var timeSlice = Math.floor(d.getTime() / 6000) % 3;
        myImageElement.src = 'http://example.com/webcams/suddenlypopular.jpg?t=' + timeSlice;
    }, 6000);
}());
</script>

所以现在我有一个缓存友好的网络摄像头，可以更新。

Apache反向代理配置

这是Apache httpd的一个片段，介绍如何反向代理网络摄像头以设置特定的缓存策略。

<Location /webcams/suddenlypopular.jpg>
  ProxyPass        http://mywebcamdevice.example.com/snapshot.jpg
  ProxyPassReverse http://mywebcamdevice.example.com/snapshot.jpg
  ExpiresByType image/jpeg "access plus 6 seconds"
  Header unset ETag
  Header unset Last-Modified
</Location>

使用ajax刷新网络摄像头图像

6 个答案:

禁用缓存会使您的网络摄像头（即使是好的）受到影响

Apache反向代理配置