Question

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

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

Answer 1

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

然而，根据我的经验，这不是防弹的。我发现在没有FUOC的过程中，唯一的方法是将字体转换为BASE64并将其直接嵌入到CSS（Font Squirrel provide a great resource for doing this）中。通过这种方式，您的字体将在CSS加载之前等待，然后再显示自己。

Answer 2

创建一个隐藏元素的类。将该类添加到最初要隐藏的元素中。运行要执行的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>

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

2 个答案: