2010-06-28 69 views
2

我在new site上工作,並有一個重複的背景圖像,提供頁面顏色的「連續」流動。它在視覺上與內容完美融合,但是,當頁面加載或切換到另一頁時,在內容加載之前存在短暫的暫停,當此背景圖像可見時 - 導致某種「閃動」效果,這有點令人討厭。如何保持內容加載的背景圖像「閃爍」?

這裏是CSS:

html      { background: #fff url(../_images/bg_html.jpg) repeat-y center top; } 

body      { 
         font-family: Arial, Helvetica, sans-serif; 
         font-size: .875em; 
         line-height: 1.333em; /* 16px/12px = 1.333em */ 
         color: #000; 
         background: url(../_images/bg_body.png) repeat-x left top; 
         } 
#container { 
         width: 980px; 
         margin: 0 auto; 
         background: url(../_images/bg_container.jpg) repeat-y left top; 
         overflow: hidden; 
         } 

背景圖像是非常小 - 4K,所以在我看來,頁面加載和轉換可能是很多更加無縫。我將不勝感激導致解決方案的一些見解。

謝謝!

回答

1

你真的無法避免它,因爲它是瀏覽器在加載時試圖渲染頁面。但是你可以減少它的影響,所以它不是那麼明顯。

爲此,您應該從頭開始將標題設置爲具有確切尺寸的div,並使其背景顏色與圖像的綠色相同。

左邊的菜單應該從開始處有正確的寬度,這樣在頁面加載時看不到灰色的「縮小」。

P.S.這是建議在頁面中指定圖像大小的原因之一。如果您不這樣做,則瀏覽器在加載頁面時會「迴流」頁面,並創建類似的閃爍效果。