2

我正在一个新站点上工作，并且有一个重复的背景图像，它提供了“连续”的页面颜色流。从视觉上看，它与内容完美融合，但是，当页面加载或切换到另一个页面时，当此背景图像可见时，在内容加载之前会有一个短暂的暂停 - 导致一种“闪烁”的影响，这有点令人恼火.

这是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，所以在我看来，页面加载和转换可以更加无缝。我会很感激一些导致解决方案的见解。

谢谢！

4

3 回答 3

1

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

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

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

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

于 2010-06-28T11:36:13.827 回答
0

您可以为此尝试jquery 预加载器。

于 2010-06-28T11:30:04.497 回答
0

您是否考虑过预取？

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

于 2010-06-28T11:54:21.867 回答