Обновление картинки без перезагрузки страницы - PullRequest
9 голосов
/ 28 июня 2011

Как бы я обновлял изображение, которое обновляется на сервере каждые пару секунд, если бы пользователю не нужно было нажимать кнопку обновления, мое первое предположение было ajax, но я раньше не работал с ним. Может ли кто-нибудь указать мне правильное направление?

РЕДАКТИРОВАТЬ: забыл упомянуть, что изображение представляет собой .gif, сгенерированный Perl-скриптом - попытка получить его с помощью URL-адреса вернуть скрипт

Ответы [ 6 ]

10 голосов
/ 28 июня 2011

AJAX не требуется, просто обновите свойство src изображения.Но, поскольку он имеет тот же URL-адрес, вы должны дать браузеру уникальный адрес, чтобы гарантировать, что вы не просто загрузите старое изображение из кеша браузера.Вы можете гарантировать уникальное изображение, получив серийный номер текущей даты через new Date().valueOf() и добавив его к URL-адресу в виде строки запроса.

$("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

Вы также можете использовать new Date().getTime() для получения серийного номера илипросто приведите дату к числу: +new Date()

Чтобы сделать это по таймеру, используйте setInterval().Это будет полный код, который вы можете просто вставить в тег скрипта на странице <head>:

$(function() {
   var intervalMS = 5000; // 5 seconds
   setInterval(function() {
      $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date());
   }, intervalMS);
});
9 голосов
/ 28 июня 2011

Сделайте что-то вроде

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

Это изменит атрибут src вашего тега изображения (с идентификатором «yourimage») и добавит в него случайную строку запроса, заставляя браузер каждый раз перезагружать изображениеизмените его.

Чтобы перезагрузить изображение каждые 5 секунд, сделайте что-то вроде:

window.setInterval(function()
{
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();
}, 5000);
3 голосов
/ 28 июня 2011

Кажется, что-то не так с вашим скриптом Perl.Попытка получить доступ к изображению по URL должна все равно вернуть изображение.Он должен возвращать двоичные данные, а не скрипт.Вы также должны установить заголовок Content-type ответа на image / gif.Проверьте, действительно ли он возвращает двоичные данные, прежде чем пытаться исправить код JavaScript.

3 голосов
/ 28 июня 2011

просто используйте javascript для обновления свойства src img.

HTML:

<img src="..." id="myImage" />

JS:

document.getElementById("myImage").src = "http://....";

Если вы хотите использовать таймер, сделайте что-то вроде этого:Если у вас есть проблема с кэшированием, добавьте случайную строку запроса в конец URL: "? Rnd = randomNumberHere"

1 голос
/ 30 ноября 2016

Добавление промежутка времени в конец URL изображения сработало для меня.

var imagePath = "http://localhost/dynamicimage.ashx";

$ (" # imgImage "). Attr (" img ", imagePath + & ts" + (new Date ()), toString ());

0 голосов
/ 28 июня 2011

каждые X секунд отправлять Ajax на сервер.если ссылка на изображение из ответа == предыдущая, обновления нет, если ссылка новая: $('img.class').attr('src','link');

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