加载网页时如何避免背景色闪烁？答案

【问题标题】：how to avoid background-color flash while loading up a web page?加载网页时如何避免背景色闪烁？
【发布时间】：2009-12-22 05:30:45
【问题描述】：

我有一个网站（使用 PHP）。主背景为绿色，内容区域为白色。在从一页切换到另一页时（因为它需要几毫秒），背景颜色会在白色接管之前闪烁。我认为这是因为绘制/创建 dom 元素的方式。我尝试使用 ob_start(); 和 ob_flush(); 但没有太大帮助。

有什么办法可以避免吗？

谢谢 JJ

【问题讨论】：

听起来问题出在浏览器方面，可能是您构建 HTML/CSS 的方式。您使用的是哪个浏览器和版本？你能发布一个重现这个所需的最低 HTML 的 sn-p 吗？

标签： php html css

【解决方案1】：

您可以尝试为内容区域显式设置大小（高度和宽度）或最小高度。您还可以使用具有白色区域的背景图像。如果您的背景是纯色（或水平渐变），您可以使用 1px 高的 gif，这将是一个非常小的文件大小。但是在第一次加载背景之前，您仍然可能会眨眼。

最终，我认为用户已经习惯了看到这一点。我不认为这是一个大问题，也不会花很多时间试图解决它。但也许你的老板不同意。

【讨论】：

你撞到头了..老板不同意。让我检查一下设置高度。谢谢

【解决方案2】：

只是一个猜测，但在您的 CSS 中，将这两个规则放在一个 CSS 文件中，然后是内容区域样式声明，并确保此 CSS 文件在任何其他文件之前加载。

【讨论】：

【解决方案3】：

不知道是不是这样，但是我看到为了避免IE中没有风格化元素的闪烁问题，有人加了一个空的script标签为

<script type="text/javascript">//This is necessary to avoid flickering of not stylized items in IE</script>

【讨论】：

【解决方案4】：

我个人非常喜欢闪光灯。它让我知道实际上已经加载了一个新页面。这是反馈。

一位老同事向我介绍了一个鲜为人知的 Internet Explorer <meta> 标签...它可以让您在页面之间添加 fade transition，例如

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">

它仅限于 IE。

【讨论】：