css - 如何在内容加载之前保留 "flashing"的背景图像？

Question

我正在研究 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，所以在我看来页面加载和过渡可以更加无缝。如果能提供一些有助于解决问题的见解，我将不胜感激。

谢谢!

Answer 1

您无法真正避免它，因为它是浏览器在加载页面时尝试呈现页面。但是你可以减少它的影响，让它不那么引人注目。

为此，您应该将标题设为一个从一开始就具有精确尺寸的 div，并将其背景颜色设为与图片相同的绿色。

并且左侧菜单从一开始就应该具有正确的宽度，这样您就不会在页面加载时看到灰色“收缩”。

附言这就是为什么建议在页面中指定图像大小的原因之一。如果您不这样做，浏览器会在页面加载时“回流”页面，并产生类似的闪烁效果。