Question

我想创建一个函数来每5秒更改一次背景<header>。

一方面，我有一个每X次更改的图像，它由一个php文件生成：

../bg.php

所以我已经完成了用$("header").css()更改背景图片。

像这样运行脚本：

(function($)
{
    $(document).ready(function()
    {

        var $container = $("header");
        $container.css("background-image", "url(bg.php)");
        var refreshId = setInterval(function()
        {
            $container.css("background-image", "url(bg.php)");
        }, 9000);
    });
})(jQuery);

但不会自行改变。

Answer 1

这只是猜测，但浏览器很有可能只是缓存文件。您可以在服务器上添加缓存控制标头，或者每次更改背景时添加一个nonce参数：

    var counter = 1, refreshId = setInterval(function()
    {
        $container.css("background-image", "url(bg.php?_=" + counter++ + ")");
    }, 9000);

最好继续正确设置缓存标头，以避免客户端浏览器不必要地反复缓存同一图像。

Answer 2

也许是因为您的浏览器缓存了它。在网址末尾放置一个随机数：

$container.css("background-image", "url(bg.php?rnd=" +  Math.random() + ")");
var refreshId = setInterval(function()
{
    $container.css("background-image", "url(bg.php?rnd=" +  Math.random() + ")");
}, 9000);

Answer 3

window.setInterval(function(){
  /// call your function here
}, 5000);

您可能需要调用location.reload（）;同样。

Answer 4

尝试将查询添加到bg.php

var d = new Date();
var n = d.getTime();
$container.css("background-image", "url(bg.php?" + n + ")");

浏览器不会再次加载具有相同名称的文件

Answer 5

如果您不想重新加载整个页面，则需要将background-image设置为其他网址。但是，您可以每次将片段（例如http://example.com/index.php#fragment）或查询字符串（例如http://example.com/index.php?querystring）附加到该URL .php文件。如果您要每5秒重置一次，一个好方法是将new Date().getTime();附加到图像源URL的末尾，如下所示：

var currentDate = new Date();
$container.css("background-image", "url(bg.php#" + currentDate.getTime() + ")");

或甚至更简洁/有效

$container.css("background-image", "url(bg.php#" + new Date().getTime() + ")");

您最终应该拥有类似background-image的{{1}}属性。这很好，因为片段不会影响浏览器查找图片的位置（仍为url(bg.php#1413320228120)），但每次都会将其视为不同的网址并重新加载。

您的解决方案应该类似于：

bg.php

jQuery setinterval函数改变css

5 个答案: