在 Firefox 中页面完全加载之前，无样式的文本会闪烁答案

【问题标题】：Unstyled text flashes before page fully loads in Firefox在 Firefox 中页面完全加载之前，无样式的文本会闪烁
【发布时间】：2013-05-16 17:43:11
【问题描述】：

我有一个在 JQuery UI 对话框中加载的网页。当页面在 Firefox 中加载时，纯文本会在所有 css 和 javascript 运行之前显示一秒钟。加载完所有内容后，文本就会正确显示。有没有办法阻止文本在所有 CSS/JavaScript 运行之前显示？我试过打开和关闭可见性，但没有正常工作。

这似乎只发生在 Firefox 中，而不发生在其他浏览器中。

【问题讨论】：

您使用的是嵌入式css和js还是外部链接？外部链接将有助于在客户端浏览器上缓存样式和 js
stackoverflow.com/a/9823468/888177

标签： javascript css firefox dom fouc

【解决方案1】：

创建一个隐藏元素的类。将该类添加到最初要隐藏的元素中。运行要执行的 javascript 后删除该类。像下面这样的东西应该可以帮助你。

.js-needed 
{
    display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); } );

<div class="js-needed">Stuff to hide initially</div>

【讨论】：

【解决方案2】：

有些人喜欢将其称为 FOUC（无样式内容的 Flash）。如果您使用的是通过 javascript (resource) 嵌入的 Google 字体，那么它会向 html 标签添加一个类，允许您在使用 html.wf-loading #content{display:none} 等常规规则加载脚本时隐藏内容。

但是，根据我的经验，这并不是万无一失的。我发现在此期间相当一致地实现无 FUOC 的唯一方法是将您的字体转换为 BASE64 并将其直接嵌入到您的 CSS (Font Squirrel provide a great resource for doing this) 中。这样，您的字体将在 CSS 加载之前等待，然后再显示自己。

【讨论】：