我有一个在 JQuery UI 对话框中加载的网页。当页面在 Firefox 中加载时,纯文本会在所有 css 和 javascript 运行之前显示一秒钟。加载完所有内容后,文本就会正确显示。有没有办法阻止文本在所有 CSS/JavaScript 运行之前显示?我试过打开和关闭可见性,但没有正常工作。
这似乎只发生在 Firefox 中,而不发生在其他浏览器中。
我有一个在 JQuery UI 对话框中加载的网页。当页面在 Firefox 中加载时,纯文本会在所有 css 和 javascript 运行之前显示一秒钟。加载完所有内容后,文本就会正确显示。有没有办法阻止文本在所有 CSS/JavaScript 运行之前显示?我试过打开和关闭可见性,但没有正常工作。
这似乎只发生在 Firefox 中,而不发生在其他浏览器中。
有些人喜欢称其为 FOUC(无样式内容的 Flash)。如果您使用的是通过 javascript(资源)嵌入的 Google 字体,那么它会向标签添加一个类html
,允许您在使用正常规则加载脚本时隐藏内容,例如html.wf-loading #content{display:none}
.
但是,根据我的经验,这并不是万无一失的。我发现在此期间相当一致地实现无 FUOC 的唯一方法是将您的字体转换为 BASE64 并将其直接嵌入到您的 CSS 中(Font Squirrel 提供了很好的资源)。这样,您的字体将在 CSS 加载之前等待,然后再显示自己。
创建一个隐藏元素的类。将该类添加到您最初要隐藏的元素中。运行要执行的 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>