Question

I have some images from another source that need to refresh from their offsite source every 30 seconds. I would like to use JavaScript to accomplish this so as to avoid an entire page reload.

Presently I’ve attempted something similar to this question: “reloading a page after every 10 sec in rails 3.1”

(This is a Rails application, but I probably don’t need a Rails specific answer in this case.)

Notwithstanding, I am ending up with no appreciable result when I add a div around the link + image nor when I add a div to the image itself. I have attempted both solutions in this example by creating a element-reload.js.

The first solution that’s marked as the answer simply reloads the page with nearly all of the page elements absent. The second solution makes the image that I’m trying to refresh actually disappear upon first refresh when I surround the link + image with a div, but when I place the id upon which it’s acting on the actual image tag, it yields nothing.

I’m sure I’m missing something rather simple since JS is not a strong suit for me at the moment.

Finally, I do have a number of sources to refresh and would like to see an example of performing this for a class vs an id if possible, but having more granular control over each one may be best in the end for varied times for the refreshes.

Answer 1

If you’re up for jQuery, this can be done quite easily:

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

In order to prevent browser caching, you have to fool the browser and load the image with a GET request variable timestamp. It doesn’t matter what the parameter is, but the image will load brand-new and not from cache because the URL changes.

---

jQuery is famous for its use of CSS-like selectors.

Replace $('img') with one of these:

$('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".

There’s also the :not() selector, which can filter your results:

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