背景瞬間加載閃爍

我有一個div（.header）包含在其他divs中。當我的頁面加載時，只是一個.header div在頁面加載時「閃爍」白色，特別是在Firefox中，但在IE8中也有一點點。我無法找到什麼樣的CSS或缺乏導致此 - 沒有圖像或背景顏色與該div相關聯。在.header中有一個logo.png。思考？背景瞬間加載閃爍

http://dev.bwmsnow.co.nz/

來源

2010-04-15 Joe Fletcher

在FF 3.6（Vista）或IE8（Vista）中，我沒有看到div.header上描述的白色背景。我試圖將連接恢復到56k，但仍然沒有發現問題。 – 2010-04-16 06:43:10

從我所看到的（在XP火狐）它，因爲它看起來像它加載緩慢頭容器DIV沒有那麼多的閃光燈，以及相關的背景圖像。如果我沒有緩存加載，整個徽標欄最後載入（加載前是白色的），但不只是一個div。 YSlow統計了大約50個HTTP請求，這可能解釋了其中的一些。它看起來並不像頁面很大，而是由很多可能會造成一些處理滯後的作品組成。

來源

2010-04-15 23:55:42 acrosman

我打算優化什麼時候完成，也就是使用YSlow，並且這個站點（Magento）有一些內置的JS/CSS縮小器，所以可能會修復它。我認爲你的目標是它只是最後一次加載，並且在那之前是白色的。是否有足夠簡單的方式讓它在其他人之前加載（而不會對現有代碼造成太大影響）？ – 2010-04-16 06:49:52

如果我理解這個問題，我的建議是將類似於背景圖像的背景顏色添加到<div class="header">的舊技巧，以便在頁面加載時（但在圖像加載之前）用戶看到類似於背景的顏色圖片。這樣，圖像加載的視覺影響就不那麼明顯了。

我Photoshop的眼睛掉落了你的背景圖片，並建議使用#a1dff8作爲顏色。對於CSS應該是：

.header{ background:#a1dff8 url('images/yourheader.png'); }

而且，看你的代碼時，我看到你有幾個外部JS文件。你應該考慮一個縮小器。只需谷歌或StackOverflow JS/CSS縮小。

來源

2010-04-16 02:59:36

在這個特殊的例子中，我不認爲這會起作用，因爲div.header沒有背景圖片。標題背景圖片實際上位於body元素上。所以如果div.header被賦予了背景色，它實際上會掩蓋背景圖像。 – 2010-04-16 06:41:00

你說得對。所以我會做的是將背景圖片移動到標題div。這樣它會工作。我看了一下你的網站f6design.com，真的很喜歡這個設計。很酷。 – 2010-04-16 10:14:51

背景瞬間加載閃爍

回答

相關問題