新手上路，请多包涵

如何停止网页上无样式内容 (FOUC) 的闪烁？

原文由 CMS Critic 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 674

2 个回答

得票最新

✓ 已被采纳

此处介绍的纯 CSS 解决方案均不适用于现代浏览器（异步加载 css 和字体）。你必须使用Javascript。我为避免 FOUC 所做的是：

 <html>
  <body onload="document.body.style.visibility=`visible`;">
    <script>document.body.style.visibility=`hidden`;</script>

使用这种方法，我的网页正文会一直隐藏，直到加载完整页面和 CSS 文件。加载完所有内容后，onload 事件会使主体可见。因此，网络浏览器保持空白，直到屏幕上弹出所有内容。

这是一个简单的解决方案，但到目前为止它正在工作。

这不会影响禁用 Javascript 的用户，因为 <script> 标签被忽略。

原文由 Álvaro Durán 发布，翻译遵循 CC BY-SA 4.0 许可协议

此页面上的每个答案都会减慢负载，并且只会隐藏根本问题。如果您遇到 FOUC，请找出它发生的原因并加以解决。

在核心，这正在发生：

作为参考，以下是 FOUC 的示例：

原文由 fregante 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

推荐问题

子站问答

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

消除无样式内容的闪光