使用 SetInterval 更改 CSS 背景 url

Question

我对此感到非常沮丧...我有一个解决方案，其中 CSS 背景元素来自网络服务。目前系统使用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 + "')");
    }
 });

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

网络服务的 url 根据它在 GET 请求中收到的查询字符串获取随机图像，但似乎 JQuery 只进行一次调用，然后缓存第一个响应因为背景图像只会在第一次发生变化，然后在页面完全刷新之前不会再发生变化。

Answer 1

尝试替换

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

和

setInterval(callback, 5000);

Answer 2

由于路径已声明且未更改，因此 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');

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

Answer 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 上的你们太棒了！

使用 SetInterval 更改 CSS 背景 url

Using SetInterval to change CSS background url

html

javascript

css

jquery

setinterval