使用SetInterval更改CSS后台网址

Question

我真的对此感到沮丧...我有一个解决方案，其中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只调用一次然后缓存第一个响应，因为背景图像仅在第一次更改时然后再也不会再次页面完全刷新。

Answer 1

由于路径已声明且未更改，因此CSS也未更改。 因此，在CSS中，您不会更改您的网址，因此不会更改您的背景。

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

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

这不会改变一件事。由于它没有改变，因此不会触发重新加载。

Answer 2

尝试替换

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

与

setInterval(callback, 5000); 

Answer 3

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

每次确保网址不同都会阻止缓存并正确获取随机图像！

   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上很棒！