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，并使其背景颜色与图像的颜色相同。

左侧菜单从一开始就应该有正确的宽度，以便在页面加载时看不到灰色“缩小”。

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

Answer 2

你可以试试jquery preloader。

Answer 3

您是否考虑过预取？

http://devedge-temp.mozilla.org/viewsource/2003/link-prefetching/index_en.html

在内容加载之前如何防止背景图像“闪烁”？

3 个答案: