问题标签 [fouc]

我们遇到了 caroufredsel 的问题，在我们的网站第一次打开时，它可以完美加载，但是当它被缓存并再次打开时，会发生 FOUC，并且元素会短暂地以垂直位置显示。

该文档告诉“溢出：隐藏”可以解决问题（http://docs.dev7studios.com/jquery-plugins/caroufredsel#jumpNav-8），但在我们的例子中它没有。

这是我们的代码：

这是我们的开发网站： http: //www.comercialbv.com/

我一直在修复一个网站 JS，将其移至底部，缩小等。除了在（电子商务网站的）博客上，一切都很好，因为页面加载它导致标题没有样式大约一秒钟，但它不会发生在网站的任何其他部分，即使它们共享相同的 CSS/JS。该博客的图像很重，但是禁用了图像（我也尝试过禁用脚本），它仍然会发生。这只是在我做出改变后才发生的，我不能简单地恢复，但这些改变都是积极的，如果有的话应该会有所帮助。我看不到任何 JS 导致它（因为我删除了脚本以查看它是否在那里）并且它不会在 FF 中发生。

我会分享一个链接，但它在一个封闭的登台服务器后面。我可以提供代码，但我不确定是什么，而且有很多。

所以，我希望我可以使用开发工具来弄清楚发生了什么，可能是时间线视图或其他东西。我只是不知道该怎么做。

有什么建议吗？

Ed：我在登台站点和直播站点上都使用了网络选项卡，从图片中可以看出，它们是相同的，css 是实际页面之后加载的第一件事，而在直播站点上它实际上是 ga。 js。所以现在更是一个谜……

我有一个网页，它通过 javascript 将 iFrame 动态加载到自身中。这导致 IE 中出现白色闪烁，我能够使用 iFrame 上的以下属性解决闪烁问题：

加载框架后，我使用 target="frameName" 将其他页面加载到框架中 - 而不是通过动态更改 iFrame 的源。然而，这会导致另一个白色闪光。

更有趣的是，在 iFrame 中加载的页面是跨域的。

父级中的 iFrame 如何知道页面何时在 iFrame 中完成加载，而不会导致 iFrame 文档中的 postMessage？

换句话说，当 iFrame 的文档加载时，是否会在 PARENT 中触发某种事件？

如果有，那么我可以在“a”标签的点击事件中使 iFrame 不可见，并在 iFrame 的文档加载后再次使其可见，从而避免白色闪烁。

正如标题所说，你们如何使用 React 组件解决 FOUC 问题？当我的 React 组件被挂载并调用 componentDidMount 处理程序时，我绑定到各种 JQeuryUI 小部件。这就是 FOUC 发生的地方。

我使用 AngularJS 创建了一个简单的应用程序。当我打开页面一秒钟时，我看到下面的屏幕：

但是，加载完成后，我看到加载和样式化的内容很好：

如何防止 AngularJS 代码在我的页面上闪烁？这与FOUC有关吗？

这是HTML代码：

编辑：

除了接受的解决方案之外，还请查看我的答案以获取替代解决方案。

我的 Web GUI 布局部分由 CSS 表驱动。这主要是因为我希望“单元格”在所有情况下都具有相同的高度，而不会在对齐方面造成任何巨大的麻烦。总的来说，这种方法非常成功。

但是，我确实有一个问题，即表格中的右侧单元格有时可能需要一些时间来呈现，导致左侧单元格短暂地具有 100% 的页面宽度。这会导致明显的“闪烁”效果，虽然很小，但有点烦人。我决定修复它。

这是我的页面如何工作的模糊表示：

一切都很好，直到你使用你的开发工具给出#tbl-col2一个display: none指令，[我希望准确地]模拟浏览器渲染引擎在#tbl-col1被渲染和#tbl-col2被渲染之间的状态。

请注意#tbl-col1，尽管我给了它宽度，但它立即占据了表格宽度的 100%。我有点理解为什么会发生这种情况：毕竟，我已经要求浏览器让divs 表现得像表格一样。不过，这里还是不受欢迎的。

我试图通过插入一个“垫片”来解决这个问题，希望没有width它它会扩展以填充右侧的所有空间，直到右侧被渲染：

正如您再次 hide 所看到的那样#tbl-col2，它并没有产生任何盲目的区别：#tbl-col1仍然占据了表格的整个宽度，而不是我允许的 50px。

假设我宁愿解决这个问题也不愿完全放弃 CSS 表格布局，我该怎么办？

还是我将不得不更换布局，或者更糟糕的是，采用 JavaScript 方法来解决 FoUC？

我使用 jQuery UI Sortable 创建了一个小的拖放。下面的 .gif 演示了该问题。您在 .gif 中看不到它，但页面上的所有文本都有一闪而过的无样式默认字体文本，而不仅仅是可排序的文本。] 1

经过数小时的实验，我发现将以下 CSS 属性更改为使用浏览器默认字体或其他本地字体可以解决问题：

Lato 正在由我的 HTML 文档头部的这一行加载：

从 Google 加载此样式表：

这是您看到的 jQuery UI Sortable 的 Javascript 代码和标记。它连接到另一个 Sortable 以允许在列表之间拖动项目：

我一直无法在 Chrome 和 IE 中重现此问题。谁能告诉我为什么会这样？有没有办法在 Mozilla 中将 @font-face 与 jQuery UI Sortable 一起使用并避免这种奇怪的文本样式闪烁？

我试图阻止 FF 和 IE 中的 FOUC。加载我的 css 异步，（可以理解）导致它。将功能设置为隐藏然后显示正文适用于 Chrome，但不适用于 IE/FF。

我已经尝试了在线显示的所有解决方案，这些解决方案应该可以工作，但没有一个。想知道我的代码中是否忽略了某些东西；或其他任何人都知道的解决方案？

我的理解是链接标签是同步的：链接元素是同步加载的吗？

如果是这样，FOUC 应该只是某些内容下方链接标签中的 CSS 的问题。真的吗？

我注意到 Firefox 中有一些奇怪的行为，因为我在通过 javascript 附加 CSS 时得到了 FOUC。问题是，每次使用 javascript 动态添加 CSS 样式时，Firefox 都会重新加载 webfont。尽管重新加载的文件通常会被缓存，但它仍然会创建 FOUC（无样式内容的闪存）。

实际上，仅当使用font-family或@media查询将 CSS 动态添加到文档时才会出现此问题。在这两种情况下，Firefox 都会重新加载网络字体 :(

Codepen 演示： http ://codepen.io/mjau-mjau/pen/XXgZbV?editors=101

正如您在图像中看到的，在动态应用 CSS 后重新加载了 webfont：

这只发生在 Firefox 上。任何人都知道为什么会发生这种情况，或者是否有针对 Firefox 的官方错误跟踪器？