使用 SetInterval 更改 CSS 背景 url答案

【问题标题】：Using SetInterval to change CSS background url使用 SetInterval 更改 CSS 背景 url
【发布时间】：2015-09-02 15:08:58
【问题描述】：

我对此感到非常沮丧...我有一个解决方案，其中 CSS 背景元素源自 Web 服务。目前系统使用HTML刷新整个页面：

<meta http-equiv="refresh" content="300" />

...

body {
    background: url('/wallspace/getfile.php?width=gt:1919&height=lt:1700') #1D1F21 top left no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

这工作得很好，除了它会触发整个页面刷新，这对最终用户来说是不和谐的。我想在 javascript 中执行这个任务，所以它是一个更优雅的过渡，并且不会每 x 秒闪烁整个页面

我不明白为什么这个 SetInterval 函数不起作用

  $(window).load(function() {          
    var path=encodeURI('/wallspace/getfile.php?width=gt:1919&height=lt:1700');
    $("body").css("background", "url('default-bg.png')");
    setInterval(function(){ callback() }, 5000); 

    function callback() {
      // This works so callback is definitely being triggered
      //alert("here");

      // This only works the first time --is there caching happening?
      $('body').css('background', "url('" + path + "')");
    }
 });

基本上，回调函数在指定的时间间隔被调用，但它不会改变背景元素。我通过调用警报验证了这一点，它们被触发了。

webservice 的 url 根据它在 GET 请求中收到的查询字符串获取随机图像，但 JQuery 似乎只进行一次调用，然后缓存第一个响应，因为背景图像仅在第一次更改然后在页面完全刷新之前永远不会再出现。

【问题讨论】：

尝试在 URL 末尾添加时间戳以避免缓存。

标签： javascript jquery html css setinterval

【解决方案1】：

由于声明了路径并且没有被更改，因此 CSS 也没有被更改。所以在 CSS 中，你不会改变你的 URL，因此不会改变你的背景。

尝试添加随机数据，例如时间戳：

$('body').css('background', "url('" + path + "&tx="+(new Date()).getTime()+"')");

第一次成功的原因很简单，你在改变

background: url('default-bg.png');

到

background: url('/wallspace/getfile.php?width=gt:1919&height=lt:1700');

这是一个变化。

第二次改变

background: url('/wallspace/getfile.php?width=gt:1919&height=lt:1700');

到

background: url('/wallspace/getfile.php?width=gt:1919&height=lt:1700');

这不会改变任何事情。而且由于它不会改变，所以不会触发重新加载。

【讨论】：

优秀.. 对于一个简单的测试，我为每个请求生成了一个介于 1 到 100 之间的随机数，这很有效，但从长远来看，该策略显然存在缺陷。 Javascript 中似乎没有本机 GUID 生成器，您的解决方案似乎是生成唯一 url 的最佳方式。谢谢！
使用随机数让您有机会获得相同的数字，但不是 100% 您想要的，因此使用当前时间是可行的方法，因为这总是不同的。
是的，当然。随机数只是为了快速测试；我想使用 GUID，但取而代之的是，您的答案实现了相同的结果。非常感谢！

【解决方案2】：

尝试替换

setInterval(function(){ callback() }, 5000);

与

setInterval(callback, 5000);

【讨论】：

虽然更简洁更好的实践，但在逻辑上并没有什么不同。
@RoryMcCrossan 你是对的，我读错了，以为他在调用函数做setInterval(callback(), 5000);。我的错。

【解决方案3】：

谢谢@Rory McCrossan 和@Robbin 'Roboroads' Schepers

确保 url 每次都不同可防止缓存并正确获取随机图像！

   function callback() {
      // Url needs to be unique to prevent caching
      var num = Math.floor((Math.random() * 1000) + 1);

      $('body').css('background', "url('" + path + "&rand=" + num + "')");
    }

Overflow 上的你们太棒了！

【讨论】：