如何使用JavaScript每30秒重新加载一次异地图像源

How to reload offsite image sources every 30 seconds with JavaScript?

本文关键字：一次 图像 地图 JavaScript 何使用 30秒 新加载 加载      更新时间：2023-09-26

我有一些来自另一个源的图像，需要每30秒从其异地源刷新一次。我想使用JavaScript来实现这一点，以避免整个页面重新加载。

目前，我尝试过类似于这个问题的方法："在rails 3.1中每10秒重新加载一页"

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

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

标记为答案的第一个解决方案只是在几乎所有页面元素都不存在的情况下重新加载页面。第二种解决方案是，当我用div包围链接+图像时，我试图刷新的图像在第一次刷新时实际上会消失，但当我把它作用于实际图像标签的id放在上面时，它不会产生任何结果。

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

最后，我确实有很多源需要刷新，如果可能的话，我希望看到一个对类和id执行此操作的示例，但对每个源进行更精细的控制可能最终对于不同的刷新时间是最好的。

如果你想使用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"])');
相关文章：