php - 使用 jQuery 和 AJAX 定期更改背景图像 src

Question

我试图让页面主体的背景图像每（大约）N 秒更改一次。为此，我有一个 PHP 函数，当我使用 AJAX 调用它时，它会回显随机图像 src。然后我用这个新生成的替换当前的身体背景图像 src，但我无法让它工作。

这是代码，它有什么问题吗？

(function($) {

    var $body = $('body');

    window.setInterval(function() {
        $.ajax({
            url: 'http://localhost/some_path/index.php?exec=getNewBkgImgSrc',
        }).done(function(data) {
            var newImage = new Image();
            newImage.onload = function() {
                $body.css('background-image', newImage.src);
            };
            newImage.src = data;
        });
    }, 5000);

})(window.jQuery);

和有效的 PHP 函数：

public function getNewBkgImgSrc() {
    echo CONTENT_URL_DIR.'/Wallpapers/wallpaper ('.rand(1, 20).').jpg';
}

这可能是因为我使用的是 localhost 吗？当我在本地开发之前，我可以记住有 AJAX 问题。

编辑：一个线索可能是 body 元素的样式属性似乎没有在 Firebug 中更改/设置。我也尝试$('body').first()并$(document.body)使用url("")（在 background-image 属性的值中），但它也不起作用。然而，onload 事件确实会触发。

谢谢你的帮助。

Answer 1

可能需要缓存 ajax 调用。尝试将 ajax 调用的 url 属性更改为 '/some_path/index.php?exec=getNewBkgImgSrc&cb='+((new Date).getTime())。

Answer 2

我没有很好的感觉var $body = $('body');

利用$('body').css('background-image', newImage.src);

Answer 3

如果您从 PHP 获取 URL，为什么要创建一个新的图像对象？只需将 body 的 background-image 属性设置为：

$body.css('background-image', "url('" + data + "')");

如果使用香草 JS：

document.body.style.backgroundImage="url('" + data + "')";

在此处查看该属性的正确格式：http: //www.w3schools.com/cssref/pr_background-image.asp