你如何在軌道中改變背景？

我一直在試圖讓我的應用程序改變每隔一段時間的背景圖片，但我無法獲取圖片加載。我使用了Inspect Element，並且我的圖片沒有任何404，但是導軌似乎無法加載它們。無論如何，這裏是我的代碼到目前爲止。現在它只是淡入淡出整個屏幕。你如何在軌道中改變背景？

$(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(); 
});

任何幫助表示讚賞。謝謝！

來源

2015-11-13 Zero

'資產path'進行評估。因此，解決您的問題的方法是將調用移至''assets'路徑'到'backgrounds'數組。 – jvnill

@jvnill謝謝，但我會怎麼做呢？您可以使用以下代碼來創建資源路徑：「asset_path（'water_sports_medium.jpg'）」]; 這沒有奏效。 – Zero

檢查編譯的JavaScript代碼。如果您在開發人員工具中查看它，「背景」變量的計算結果是什麼？一旦你弄清楚如何填充這個陣列，你就能夠找出答案。 – jvnill

jvnill是對的。

你需要append the .erb filetype到您的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(); 
});

來源

2015-11-14 11:06:06

再次感謝@Rich Peck這工作。我只需要在jquery中添加「url（」）來添加css，這樣就可以看起來像這樣：$（「。public-content」）。css（「background」，「url（」+ backgrounds [rand ] +「）無重複中心」）; – Zero

你如何在軌道中改變背景？

回答

相關問題