Question

我一直在嘗試在我的Tumblr主題上得到一個工作'刷新隨機背景'。對於那些不知道的人來說，Tumblr主題是由HTML和嵌入式CSS和JavaScript組成的。

現在，我使用這個腳本：

<script type="text/javascript"> 
     var bg1 = 'http://i.imgur.com/image1.jpg'; 
     var bg2 = 'http://i.imgur.com/image2.jpg'; 
     var bg3 = 'http://i.imgur.com/image3.jpg'; 
     var bg4 = 'http://i.imgur.com/image4.jpg'; 
     var bg5 = 'http://i.imgur.com/image5.jpg'; 

     var randBG=[bg1,bg2,bg3,bg4,bg5]; 

     window.onload=function() { 
      num=Math.floor(Math.random()*randBG.length); 
      document.body.style.background='url('+randBG[num]+') no-repeat center center fixed'; 
</script> 

它的工作原理，但它會導致屏幕閃爍並取消我的「背景大小：覆蓋」屬性。我嘗試過圖片預加載，但沒有成功。 Tumblr不支持PHP，我沒有辦法鏈接到一個PHP文件。

所以，有兩件事。我如何在刷新時隨機化背景而不屏幕閃爍，並且在此過程中維護以下CSS屬性？所有的

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 1

首先，閃爍取決於預取和背景圖像的大小。所以如果背景圖像很大，它不會與文檔同時準備好。其次，在load事件中調用此函數意味着您需要等待，直到加載完背景之前在屏幕上加載了所有內容爲止，因此，您正在加快延遲。第三，就像我在評論中所說的，你在你的Javascript中吹走你的background-size，所以你需要以不同的方式做。

這就是我所做的。

CSS代碼段

<style> 
... 
body { 
    background: url('') no-repeat center center fixed; 
    -moz-background-size: cover; 
    background-size: cover; 
} 
... 
</style> 

的Javascript

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var bg1 = 'http://i.imgur.com/enkkn.jpg'; 
     var bg2 = 'http://i.imgur.com/BZBke.jpg'; 
     var bg3 = 'http://i.imgur.com/QOvQH.jpg'; 
     var bgs = [bg1, bg2, bg3]; 
     var num = Math.floor(Math.random() * bgs.length); 
     var bg = new Image(); 
     bg.src = bgs[num]; 
     $(bg).load(function(){ 
      document.body.style.backgroundImage = "url(" + this.src + ")"; 
     }); 
    }); 
</script> 

注意：這些背景圖片實際上是巨大的，我不建議使用的東西那麼大。保持它們壓縮和小，以便加載更快。

我使用了jQuery，因爲它能夠在$(document).ready事件觸發後立即運行某些內容，這意味着只要文檔在後臺就緒，就會觸發它。我也等到圖像實際上被加載使用，然後才把它放回背景圖像。我不相信你能夠完全消除閃爍，但我認爲這會有所幫助。