如何让div从互联网而不是缓存中获取背景图像？

Question

相关的Javascript每十五分钟运行一次，以从互联网上获取相关图像：

document.getElementById('weatherbug').style.background = "url('http://tinyurl.com/jwltx5s') repeat scroll -1px -24px transparent";

相关的HTML链接到：

<DIV ID='weatherbug'></DIV>

其他HTML我曾经试图阻止使用缓存：

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Pragma-directive: no-cache">
<META HTTP-EQUIV="Cache-directive: no-cache">

结果：无论如何，图像都会从缓存中刷新自身，忽略源图像中的更改，每小时更改一次。 如果没有互联网访问，则会导致空白图像（良好行为），除非缓存中有副本，在这种情况下会显示旧图像（不良行为）。 此外，如果缓存中有副本，则不会显示Internet上新更新的图像（不良行为）。

我尝试过的其他技巧：我试图改变我的javascript以在地址的后端添加一个随机元素，以强制缓存的内容在每次调用时失效，但是通过添加一个？randomnumberherebasedofftheDateObject来改变地址。 ass地址的末尾打破了图像的原始链接和tinyurl版本，因为它们都没有以正确的.gif后缀结尾。

如何强制缓存不保存此图像，或者至少在一段不错的时间间隔后使其无效，因此需要从相关服务器进行新的下载才能显示信息？ 坦率地说，我很难过。 :(

• 亚伦尼科尔斯

Answer 1

我不确定你的困难在哪里。 缓存破坏是要走的路。

首先，你不应该使用网址缩短器。 只需直接访问结束URL。

您需要做的就是在每个网址请求的末尾添加一个缓存清除参数和一个随机值。

我已经设置了一个可以证明这一点的codepen。 它每2秒获取一次更新的图像。 在开发工具中监视图像请求，您可以看到图像未被缓存。

http://codepen.io/anon/pen/EayVJO

window.addEventListener('load', function () {
  var url = 'http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_simplewhite&airportcode=KTTN&ForcedCity=Princeton&ForcedState=NJ&zip=08540&language=EN';

  var weatherbug = document.querySelector('#weatherbug');
  setInterval(function () {
    var rand = Math.floor(Date.now() * Math.random());
    weatherbug.style.background = 'url(' + url + '&qqq=' + rand + ') center center no-repeat';
  }, 2000);
});