问题标签 [fouc]

我有一个从模板更改的网页。我患有 FOUC（无样式内容的 Flash）。

我从这里尝试了一个解决方案：https ://docs.google.com/presentation/d/1jt_VQC5LDF-e9j8Wtxu4KZPa8ItlmYmntGy5tdcbGOY/present?slide=id.p

但无法让它工作。这是我的主要部分，脚本正在调用我的 CSS（我想！）。

这个解决方案的想法是暂停内容的加载，直到 CSS 加载完毕，但我不确定在使用 java 脚本调用时它是否会起作用。

这是我尝试过的：

这没有用。谁能建议在这种情况下阻止 FOUC 的方法？

感谢您的耐心等待，感谢您的帮助，

Ĵ

我试图在我的网站上阻止 FOUC。到目前为止，这是我的代码：

我在哪里错了？我仍然得到大约 1-2 秒的 FOUC。

谢谢

杰森

在角度 2 及以上时避免 FOUC 的最佳方法是什么？在 Angular 2 版本中是否有任何替代 ng-cloak 的方法。我对此进行了研究，但找不到任何令人满意的方法来预防 FOUC。

我在我测试过的任何其他浏览器（IE、Chrome、Opera）中都没有看到这个问题，但是每当我从服务器加载页面时，我都会在 CSS 仅应用于 Firefox 之前看到一闪而过的无样式内容.

您可以在 Firefox 浏览器中查看此网址，最新版本 59： https ://regalaunpuzzle.es/puzzles-personalizados

我已经从 create-react-app 构建了 react.js 站点。但是在生产模式下，存在 FOUC，因为样式是在呈现 html 之后加载的。

有没有办法解决这个问题？我一直在谷歌搜索答案，但还没有找到合适的答案。

假设您有某种列表，并且您允许通过 CSS 将该列表呈现为列表或网格（通过不同的 CSS 类或数据属性）。由于这纯粹是一个渲染问题，它不需要由 Web 服务器（重新）处理，因此您也可以通过 JavaScript 在客户端简单地实现切换。

但是，假设您想保存客户端的视图模式选择，例如在localStorage. 现在当页面被渲染时，需要恢复适当的视图模式。

但是，为了防止从默认视图切换到已保存视图在内容高于首屏时可见，这里的最佳做法是什么？

考虑以下粗略示例：http: //jsfiddle.net/yaubvq8d/27/

这里用于更改视图模式并从 中加载保存的视图模式的 JavaScriptlocalStorage在正文的末尾，这显然不理想。为了可视化这个问题，我还集成了一个外部加载的 JavaScript，它会阻止页面呈现 2 秒 - 因此在实际执行用于管理视图模式的 JavaScript 之前至少需要 2 秒。在这两秒钟内，您首先会看到默认视图（即网格视图），然后它会切换到您之前选择的任何视图（要对此进行测试，您显然必须先单击“列表”，然后再次运行小提琴） .

我能想到的唯一明显的解决方案是在父容器（比如说主体）中定义视图模式，然后在父容器的起始标记之后执行 JavaScript 以从本地存储加载视图模式。

但是还有其他我可能会错过的最佳实践吗？

我正在尝试向我的 Jekyll 站点添加一个简单的明暗模式切换。

我现在设置它的方式是，主体有一个dark类，该类在切换时切换到一个类，并且每当用户进入新页面时，light主题都会保留并加载。localStorageSCSS 仅具有选择器，用于.dark显示.light相应的配色方案。

这种方法的问题是我的默认主题是dark，所以如果主题设置为 ，那么当我加载新页面时，当类从 切换到时，light会有一个非常清晰的 0.2 秒闪烁。darklight

我尝试通过将 body 设置visibilty为hidden然后visible在切换后重新设置来解决问题，但不幸的是，这种方法引入了另一个令人讨厌的 flash/lag，并且没有好的方法可以阻止它在每次页面加载时闪烁。

我想到的一些潜在解决方案，但不知道它们是否可能或如何实施它们是：

1. 让Jekyll 以某种方式读取localStorage并基于它更改呈现的 HTML 的类（可能是最好的解决方案，但也可能是不可能的）

2. Jekyll 不知何故从 SCSS 生成了两个单独的样式表并使用 JS 选择正确的一个

   感谢您对如何做这些事情或潜在的替代解决方案的任何见解，谢谢！

使用 Laravel5 和 Bootstrap4 构建网站。

在扩展到实际宽度之前，我得到了一个 FOUC，其页面宽度为宽度的 1/5。

原因似乎与我如何使用容器流体有关。我正在使用“container-fluid”，因为我想要一个垂直的左侧边栏，内容位于主页的左侧。在一个简单的页面上，代码如下：

当删除我的侧边栏并使用“容器”而不是容器流体时，页面加载后显示的宽度是正确的。

更正

这与宽度变化无关。看起来很简单，这是我的侧栏，它在中心显示为空白，主页垂直对齐，然后将 2 块水平对齐

Addition1 - 我的 FOUC 错误的 GIF

以下是 FOUC 的示例：

FOUC 似乎是由我插入包含导航栏的顶部栏中的“Google Ad”-div（黄色）引起的。有些网站的广告出现在导航栏上方，因此可以这样做。有什么线索吗？

在初始化一个新的 CRA 后，我注意到一个开箱即用的 FOUC 问题。

我将应用程序上传到 S3 以查看构建的应用程序是否会出现相同的问题并且问题消失了。

有没有人看到这个并知道任何修复？我花了一些时间研究它，但没有发现任何有用的东西。在我看来，这不应该发生在未受影响的 CRA 上。

我在我的 WP 网站上使用插件 Photo Gallery 并且遇到了 CSS 问题。在画廊正确显示之前，它会以不同的方式显示片刻。根据我的发现，这显然是一个“FOUC”（无样式内容的 Flash），并且是由插件的 CSS 文件加载得太晚引起的。

现在我可以通过在插件 php 代码中向整个画廊添加一个 CSS 类（.invisible）并将 wordpress style.css 中的该类设置为“display：none;”来修复它。然后，在我的主题 JS 中，我检查页面上是否有照片库，一旦加载了相应的 CSS 文件，我就会从库中删除 .invisible 类，因此它可以正确显示。

我知道这不是一个很好的解决方案，因为下一次插件更新会破坏它。

所以我的问题是：解决此类问题的更好方法是什么？