如何防止背景图像“闪烁”在内容加载之前？
我正在开发一个新网站，并且有一个重复的背景图像，可以提供“连续”的页面颜色流。从视觉上看，它与内容完美融合，但是，当页面加载或切换到另一个页面时，当此背景图像可见时，内容加载之前会出现短暂的暂停 - 导致某种“闪烁”效果，有点令人恼火。
这是 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，所以在我看来，页面加载和转换可以更加无缝。我希望能得到一些能够带来解决方案的见解。
谢谢！
I am working on a new site and have a repeating background image that provides "continuous" flow of the page colors. Visually it blends perfectly with the content, however, when the page loads or when I switch to another page, there is a brief pause before the content loads when this background image is visible - causing a sort of "flashing" affect that is somewhat irritating.
Here is the 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;
}
The background images are very small - 4k, so it seems to me that the page loading and transitions could be a lot more seamless. I would appreciate some insights that lead to a solution.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您无法真正避免它，因为浏览器会在加载页面时尝试呈现页面。但您可以减少其影响，使其不那么明显。
为此，您应该将标题设置为从一开始就具有精确尺寸的 div，并将其背景颜色设置为与图像相同的绿色。
左侧菜单从一开始就应该具有正确的宽度，这样您就不会在页面加载时看到灰色“收缩”。
PS 这就是为什么建议在页面中指定图像大小的原因之一。如果您不这样做，浏览器会在加载时“重排”页面，并创建类似的闪烁效果。
You can't really avoid it, because it's the browser trying to render the page as it loads. But you can reduce its impact, so that it's not that noticeable.
For that, you should make the header a div with the exact dimensions from the beginning, and make it's background color the same green as the image.
And the left menu should have the correct width from the beginning, so that you don't see the grey color "shrink" as the page loads.
P.S. This is the one of the reasons why it's recommended to specify the size of the images in the page. If you don't do it, the browser "reflows" the page as they load, and creates a similar flashing effect.
你可以尝试 jquery 预加载器
you can try jquery preloader for this.
您研究过预取吗？
http://devedge-temp.mozilla.org/viewsource/ 2003/link-prefetching/index_en.html
Have you looked into prefetching?
http://devedge-temp.mozilla.org/viewsource/2003/link-prefetching/index_en.html