Auto update Image

2020-07-13 08:01发布

站内问答 / JavaScript
1612 6 6

I have an image and I want to automatically update it using either javascript, jquery or ajax.

Until now I have the following code.

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

I think it is not working because the browser is caching the image and it is not updating the image correctly.

Can someone provide me a working example?

6条回答
smile是对你的礼貌
2楼-- · 2020-07-13 08:19

On top of loading a different image each time and increasing the refresh time, you should start the setTimeout again after the image has fully loaded.

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

}
查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2020-07-13 08:28

Just add a random number to the query string on every refresh. This will trick the browser into thinking this is a different resource, while the server will serve the same picture.

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
4楼-- · 2020-07-13 08:31

You are setting the image source to the same string. That will not refresh the image, the browser thinks it already has that image, and won't issue another request. Try adding a random query parameter each time you want to refresh - then the browser should see the image as different resources.

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2020-07-13 08:32

This will do the trick, but it's a nightmare as far as performance.

<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>
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
6楼-- · 2020-07-13 08:36

Replace this line:

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

with:

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

This will generate different link each time and cached version of the img won't be used.

And don't refresh the image every 50ms. That is way too often.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
7楼-- · 2020-07-13 08:38

The solutions in this thread will work, but they force the browser to download the image every time the function runs. This will check for a new image without actually downloading until a new one is available. This process should be split off into a Worker for optimal performance.

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)