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

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

目前我已经尝试类似这样的问题了一句：“reloading a page after every 10 sec in rails 3.1”

（这是一个Rails应用程序，但我也许并不需要一个Rails具体的答案在这种情况下）

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

标记为答案的第一个解决方案只是重新加载页面，几乎所有页面元素都不存在。第二种解决方案使得我试图刷新的图像在第一次刷新时实际上消失了，当我用div来包围链接+图像时，但是当我将id作用于实际图像标签时，它什么也没有产生。

我敢肯定我错过了一些相当简单的事情，因为JS现在对我来说并不是一个强大的诉讼。

最后，我确实有很多来源需要刷新，希望看到一个例子，如果可能的话，为一个类和一个id执行此操作，但是对每个元素进行更细化的控制可能是最好的次刷新。

来源

2012-01-15 ylluminate

如果你弥补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"])');

来源

2012-01-15 05:33:54 Blender

好吧，似乎不错。实际上，您将使用此代码段重新加载所有img src。假设我想用一个updateAtInterval类重新加载所有img src的？然后，同样，如果我决定使用id而不是class，该怎么办？你能否有效地给出另外两个例子？ – ylluminate 2012-01-15 05:41:25

看我的编辑。这并不复杂。 – Blender 2012-01-15 05:44:47

另外，有趣的是，我正在试验你给我的代码，同时我看到服务器每次都发出请求，我没有看到它们实际上在浏览器中刷新。他们每次刷新都会附加更多时间戳，例如：http://pastebin.com/vHZjeTdB – ylluminate 2012-01-15 05:48:56

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

回答

相关问题