Автообновление изображения - PullRequest
Новая
       10

Автообновление изображения

5 голосов
/ 11 декабря 2011

У меня есть изображение, и я хочу автоматически обновить его, используя 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>

Я думаю, что это не такработает, потому что браузер кэширует изображение и не обновляет его правильно.

Может кто-нибудь предоставить мне рабочий пример?

Ответы [ 6 ]

6 голосов
/ 11 декабря 2011

Это сработает, но это просто кошмар с точки зрения производительности. 

<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>
2 голосов
/ 11 декабря 2011

Помимо загрузки нового изображения каждый раз и увеличения времени обновления, вы должны снова запустить 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);
    }

}
2 голосов
/ 11 декабря 2011

Просто добавляйте случайное число в строку запроса при каждом обновлении.Это заставит браузер думать, что это другой ресурс, а сервер будет отображать ту же картинку.

1 голос
/ 11 декабря 2011

Вы устанавливаете источник изображения на ту же строку.Это не обновит изображение, браузер считает, что у него уже есть это изображение, и не будет выдавать другой запрос.Попробуйте добавлять случайный параметр запроса каждый раз, когда вы хотите обновить - тогда браузер должен увидеть изображение как разные ресурсы.

0 голосов
/ 07 марта 2015

Решения в этой теме будут работать, но они заставляют браузер загружать изображение при каждом запуске функции.Это будет проверять новое изображение без фактической загрузки, пока новое не станет доступным.Этот процесс должен быть разделен на рабочий для оптимальной производительности. 

<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 голосов
/ 11 декабря 2011

Заменить эту строку: 

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

с: 

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

Это будет генерировать разные ссылки каждый раз, и кэшированная версия img не будет использоваться.

И не обновляйте изображение каждые 50 мс. Это слишком часто.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...