Как перезагрузить внешние источники изображений каждые 30 секунд с помощью JavaScript?

Question

У меня есть несколько изображений из другого источника, которые необходимо обновлять из их внешнего источника каждые 30 секунд. Я хотел бы использовать JavaScript для достижения этой цели, чтобы избежать перезагрузки всей страницы.

В настоящее время я пытался сделать что-то похожее на этот вопрос: " перезагрузка страницы через каждые 10 секунд в рельсах 3.1 "

( Это приложение на Rails, но мне, вероятно, не нужен специфичный для Rails ответ в этом случае .)

Несмотря на это, я не получаю заметного результата, когда добавляю div к ссылке + изображению или добавляю div к самому изображению. В этом примере я попробовал оба решения, создав элемент-reload.js.

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

Я уверен, что упускаю что-то довольно простое, поскольку JS сейчас не подходит мне.

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

Answer 1

Если вы настроены на jQuery , это можно сделать довольно легко:

$(function() {
  setInterval(function() {
    $('img').each(function() {
      $this = $(this);

      $this.attr('src', $this.getAttribute('src') + '?timestamp=' + new Date().getTime());
      console.log($this.prop('src'));
    });
  }, 30 * 1000);
});

Чтобы предотвратить кэширование браузера, вы должны обмануть браузер и загрузить изображениес GET переменной запроса timestamp.Неважно, что это за параметр, но изображение будет загружаться совершенно новым, а не из кэша, потому что URL-адрес меняется.

---

jQuery славится использованием CSS-подобных селекторов.

Замените $('img') одним из следующих:

$('img.yourClassName'); // Class
$('#your_id, #another_id, ...'); // ID(s). Omit the comma for a single id
$('img[id^="common_base_id"]'); // Selects all images with an id that starts with "common_base_id".

Также имеется селектор :not(), который может фильтровать ваши результаты:

$('img.yourClassName:not(.do-not-reload)');
$('img.yourClassName:not([src="img/spinner-skip.gif"])');