javascript - 在 Firefox 中页面完全加载之前无样式的文本闪烁

标签 javascript css firefox dom fouc

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

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

最佳答案

有些人喜欢将此称为 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 加载之前等待,然后再显示自己。

关于javascript - 在 Firefox 中页面完全加载之前无样式的文本闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16678781/

相关文章:

javascript - 计算文本区域中文本的大小

javascript - 使用 Firefox 聚焦后单击另一个输入时进行检测

javascript - 将javascript变量分配给twig变量symfony 2

javascript - js只返回表格的第一行

javascript - 类型安全从函数对象调用某些函数

javascript - 检查 !== 空值的 API 调用查询参数

javascript - Slick Carousel 使用默认样式无法正常工作

javascript - 如何在表单上使用 "sticky"电话号码格式占位符?

javascript - 为什么 CSS 悬停动画与 Firefox 的工作方式不同?

javascript - 浏览器对脚本 URL 的 react 不一致