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

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

目前，我已经尝试过类似的问题：“

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

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

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

我肯定我错过了一些非常简单的东西，因为JS目前不是我的强项

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

如果您愿意，这可以非常容易地完成：

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

---

好的，看起来不错。实际上，您正在使用出现的这个代码片段重新加载页面中的所有img src。假设我想用UpdateAtterval类重新加载所有img src？同样地，如果我决定使用id而不是类呢？实际上，你能给出另外两个例子吗？另外，有趣的是，我正在试验你给我的代码，虽然我每次看到服务器发出图像请求，但我没有看到它们在浏览器中实际刷新。他们每次刷新都会得到更多的时间戳，比如：我们可以在其中放一个document.write（）来获得一些到js控制台的输出，以验证我们是否正确地执行了？我没有刷新本地服务器上的图像，因此我无法确定它在运行img.myRefreshClass时是否在执行任何操作。只有img.myRefreshClass从remote.kk中拉入，它才会检查这一点。在此期间，您的上一次编辑现在甚至还没有从服务器上提取图像，这很奇怪，现在得到的“TypeError:“undefined”不是一个函数（计算“$this.getAttribute（'src'）”）”嗯。好吧，太好了！上次编辑将.getAttribute更改为.data之后，似乎是一个尝试。我在控制台中看到了img src的刷新。我意识到最后一个div需要刷新，这会生成一个Highcharts图。它在生成它的div的正上方有一个嵌入式脚本：--您所做的可以扩展到这一点吗？或者这是一个最好的新问题吗？