Javascript 如何在rails中创建不断变化的背景？

我一直试图让我的应用程序不时更改背景图片，但我无法加载图片。我使用了Inspect元素，我的图片没有404，但rails似乎无法加载它们。 无论如何，这是我目前的代码。现在，它只是淡入淡出整个屏幕

$(document).ready(function() {
    var backgrounds = ["medium2-doge-hannibal.jpg", "dog_bone_wide.jpg", "water_sports_medium.jpg"];

    function nextBackground() {

        var rand = Math.floor(Math.random() * backgrounds.length);
        $(".public-content").fadeOut(300, function () {
            $(".public-content").css("background", "asset-path("+backgrounds[rand]+" )");
            $(".public-content").fadeIn(300, function () {
                setTimeout(nextBackground, 3000)
            });
        });
    }
    nextBackground();
});

---

感谢您的帮助。谢谢

jvnill

是对的

您需要将以下内容添加到您的js：

#app/assets/javascripts/application.js.erb
function nextBackground() {
    var backgrounds = ["<%= asset_path('medium2-doge-hannibal.jpg') %>", "<%= asset_path('dog_bone_wide.jpg') %>", "<%= asset_path('water_sports_medium.jpg') %>"];
    var rand = Math.floor(Math.random() * backgrounds.length);

    $(".public-content").fadeOut(300, function () {
        $(".public-content").css("background", backgrounds[rand]);
        $(".public-content").fadeIn(300, function () {
            setTimeout(nextBackground, 3000)
        });
    });
}
$(document).ready(function() {
   nextBackground();
});

#app/assets/javascripts/application.js.erb
函数nextBackground（）{
变量背景=[“”，“”，“”]；
var rand=Math.floor（Math.random（）*backgrounds.length）；
$（“.public content”）.fadeOut（300，函数（）{
$（“.public content”）.css（“背景”，背景[rand]）；
$（“.public content”）.fadeIn（300，函数（）{
设置超时（下一个背景，3000）
});
});
}
$（文档）.ready（函数（）{
nextBackground（）；
});

资产路径

在编译资产时进行评估。这样，您的问题的解决方案是将对

资产路径的调用移动到
背景数组中。@jvnill谢谢，但我该怎么做呢？var背景=[“资产路径（'medium2-doge-hannibal.jpg'），“资产路径（'dog\u bone\u wide.jpg'），“资产路径（'water\u sports\u medium.jpg'）”]；这不起作用。请检查已编译的javascript代码。如果在开发人员工具中查看
backgrounds
变量，它的计算结果是什么？一旦你知道了如何填充这个数组，你就可以找到你的答案了。再次感谢@Rich Peck，这已经成功了。我只需要添加“url”（“在添加css的jquery中，所以这一行看起来像：$（“.public content”）.css（“背景”，“url”（“+backgrounds[rand]+”））。无重复中心”）；