Question

我有一些来自其他来源的图片需要每隔30秒从其异地来源刷新一次。我想用JavaScript来完成这个，以避免整个页面重新加载。

目前我尝试过类似这个问题：“reloading a page after every 10 sec in rails 3.1”

（这是一个Rails应用程序，但在这种情况下我可能不需要Rails特定的答案。）

尽管如此，当我在链接+图像周围添加div时，以及在图像本身添加div时，我最终没有明显的结果。我通过创建element-reload.js来尝试这个例子中的两个解决方案。

第一个被标记为答案的解决方案只是重新加载页面，几乎所有页面元素都没有。当我用div包围链接+图像时，第二个解决方案使我尝试刷新的图像实际上在第一次刷新时消失，但是当我将其放置在实际图像标签上的id时，它不会产生任何效果。 / p>

我确信我错过了一些相当简单的东西，因为JS目前对我来说并不适合。

最后，我确实有很多资源需要刷新，如果可能的话，我想看一个为类和id执行此操作的示例，但是对每个源进行更细粒度的控制可能最终会在不同时间进行为了刷新。

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"])');

如何使用JavaScript每30秒重新加载非现场图像源？

1 个答案: