自动更新图像答案

【问题标题】：Auto update Image自动更新图像
【发布时间】：2012-01-17 14:17:57
【问题描述】：

我有一张图片，我想使用 javascript、jquery 或 ajax 自动更新它。

到目前为止，我有以下代码。

<html>

<head>
<script language="JavaScript"><!--
  function refreshIt() {
    if (!document.images) return;
      document.images['myCam'].src = 'swt.png';
      setTimeout('refreshIt()',50); // refresh every 50ms
 }
  //--></script>
</head>

<body onLoad=" setTimeout('refreshIt()',50)">

<img src="swt.png" name="myCam">

</body>

</html>

我认为它不起作用，因为浏览器正在缓存图像并且没有正确更新图像。

谁能给我一个可行的例子？

【问题讨论】：

您认为它不起作用....？发生了什么？
每秒刷新 20 次？我可能错了，但我认为在浏览器中效果不佳？
P.S.你 nac 也使用：setTimeout(refreshIt,50)，对我来说看起来不错。（但是是的，50 毫秒？不是太多请求吗？）

标签： javascript jquery html ajax

【解决方案1】：

这个线程中的解决方案会起作用，但它们会强制浏览器在每次函数运行时下载图像。这将在没有实际下载的情况下检查新图像，直到有新图像可用。应该将此进程拆分为一个 Worker 以获得最佳性能。

<html>
<head>
    <script language="JavaScript">
        var lastModified;
        var reader;
        var http;

        function init() {
            http = new XMLHttpRequest();
            http.onreadystatechange = function (e1) {
                if (this.readyState == 4 && this.status == 200) {
                    reader = new FileReader();
                    reader.onloadend = function (e2) {
                        if (this.readyState == 2) {
                            var dataUrl = this.result;
                            document.getElementById("image").src = dataUrl;
                        }
                    }
                    reader.readAsDataURL(new Blob([http.response], {type: http.getResponseHeader("Content-Type")}));
                }
            }
            refresh();
        }

        function refresh() {
            http.open("GET", "http://" + window.location.hostname + "/current", true);
            if (lastModified != null) http.setRequestHeader("If-Modified-Since", lastModified);
            http.responseType = "blob";
            http.send(null);
            if (http.getResponseHeader("Last-Modified") != null) lastModified = http.getResponseHeader("Last-Modified");
            setTimeout(refresh, 50);
        }  
    </script>
</head>
<body onload="init()">
    <img id="image" src="">
</body>
</html>

【讨论】：

【解决方案2】：

这可以解决问题，但就性能而言，这是一场噩梦。

<html>
    <head>
        <script language="JavaScript">
            function refreshIt(element) {
                setTimeout(function() {
                    element.src = element.src.split('?')[0] + '?' + new Date().getTime();
                    refreshIt(element);
                }, 50); // refresh every 50ms
            }
        </script>
    </head>
    <body>
        <img src="swt.png" name="myCam" onload="refreshIt(this)">
    </body>
</html>

【讨论】：

【解决方案3】：

除了每次加载不同的图像并增加刷新时间之外，您应该在图像完全加载后再次启动setTimeout。

function refreshIt() {
    if (!document.images) return;
      var img = new Image();
      img.src = 'swt.png'; // use a random image

      img.addEventListener('load', function () {
          // you should cache the image element
          document.images['myCam'].src = this.src; 
          setTimeout(refreshIt, 50); // refresh every 50ms    
      }, false);
    }

}

【讨论】：

【解决方案4】：

替换这一行：

document.images['myCam'].src = 'swt.png';

与：

var date = new Date();
document.images['myCam'].src = 'swt.png?ts=' + date.getTime();

这将每次生成不同的链接，并且不会使用缓存版本的img。

并且不要每 50 毫秒刷新一次图像。这种情况太频繁了。

【讨论】：

【解决方案5】：

您正在将图像源设置为相同的字符串。这不会刷新图像，浏览器认为它已经拥有该图像，并且不会发出另一个请求。每次要刷新时尝试添加一个随机查询参数 - 然后浏览器应该将图像视为不同的资源。

【讨论】：

【解决方案6】：

只需在每次刷新时向查询字符串添加一个随机数。这将诱使浏览器认为这是一个不同的资源，而服务器将提供相同的图片。

【讨论】：

当您使用它时，50 毫秒作为刷新间隔可能太频繁了。