Question

我有一个图片，我想使用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>

我认为它无法正常工作，因为浏览器正在缓存图像而且没有正确更新图像。

有人能为我提供一个有效的例子吗？

Answer 1

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

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

Answer 2

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

Answer 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);
    }

}

Answer 4

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

Answer 5

替换此行：

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

使用：

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

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

不要每隔50ms刷新一次图像。这种情况太常见了。

Answer 6

此线程中的解决方案将起作用，但它们会强制浏览器在每次运行该函数时下载映像。这将检查新图像，而无需实际下载，直到有新图像可用。这个过程应该分成一个工人，以获得最佳性能。

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

自动更新图像

6 个答案: