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元素的style属性不会在Firebug中更改/设置。我还尝试了$('body').first()和$(document.body)并使用url("")（在background-image属性的值中），但它也不起作用。然而，onload事件会触发。

感谢您的帮助。

Answer 1

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

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

如果使用vanilla JS：

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

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

Answer 2

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

Answer 3

我对var $body = $('body');

没有很好的理解

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

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

3 个答案: