问题标签 [fouc]

我正在使用 Head.js、Google Web Fonts，并从网络上的其他地方提取一些内容（占位符图像）。

我注意到的是，在页面加载时，我看到了无样式的内容，然后我的标题字体正确加载，但重量不正确，然后加载了正确的重量。

关于是什么导致我的标题文本出现这种奇怪行为的任何想法？它不应该只是从无样式变为正确请求的字体吗？

还有什么是阻止对禁用 javascript 的人友好的 FOUC 的最佳方法？

谢谢！

更多细节：

我正在使用 Google 提供的 Javascript 方法来插入我使用的 3 种字体。我可以清楚地看到它正在加载 'Istok+Web:700:lating' ，这意味着应该只提供 700 的重量。

由于这种方法，我根本不使用@font-face。简单的 font-family 就好像它是一个普通的东西。

虽然我正在使用 LESS.js，但从网络分析器来看，它似乎并没有导致任何严重的减速。

我正在一个有很多 Javascript 和 jQuery 的网站上工作——据我所知，其中大部分是在文档准备好后触发加载的。但是，当页面加载时，您会得到大约一秒钟的白色 FOUC。但是如果你完全禁用 Javascript，根本就没有白闪。

如何确保 Javascript 在页面加载后才开始加载？它已经在大量使用

...所以在页面完成加载并呈现之前，Javascript不应该触发......对吗？但不知何故，页面在渲染之前等待脚本完成——即使它不需要，因为页面在 Javascript 完全禁用的情况下看起来仍然很好。

我有一个带有 21 个儿童主题的 wordpress 网站。在我的侧边栏中，我从以下位置嵌入了一个 jQuery Vertical Mega Menu 小部件：

http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/

菜单工作正常。唯一的问题是当网站加载时会有一个短的 FOUC（无样式内容的闪烁）。

http://en.wikipedia.org/wiki/Flash_of_unstyled_content

我不知道如何防止它闪烁。我阅读了一些带有解决方案的类似问题，但我不知道如何将其应用于我的孩子主题。

有人说你必须添加jQuery(document).ready(function() {. 但是在哪里？我试图将它添加到我的子主题的functions.php中：

但它给了我一个解析错误说：

解析错误：语法错误，意外的 T_FUNCTION，在第 28 行的 /..../functions.php 中需要 ')'

我有一个隐藏错误消息的页面display: none;

页面加载时，错误消息会短暂显示然后消失。似乎 ccs 对页面的应用速度很慢。

如何改善用户体验并且在加载时不允许显示错误消息？

该页面还使用 Ajax 调用加载表。这会影响 css 如何应用于页面吗？

谢谢。

我有一个 AngularJS 项目，我想在类名的页面加载期间防止 FOUC。我读过关于 ng-template 的内容，但这似乎只对标签内的内容有用。

我希望它在页面加载时成为“登录”。有什么策略吗？还是我只需要捏造它并将其加载为“登录”并手动使用 javascript 来调整这个实例的 DOM。

我正在使用一个名为 Viral Gate 的脚本，它用于在有人点击 Facebook Like Box 后解锁 div 内的内容，唯一的问题是 div 出现在脚本之前，所以当页面加载时它出现在脚本在 5 秒或更短的时间内被渲染，具体取决于用户连接，换句话说，如果用户希望他可以在 div 出现时暂停页面，那么 javascript 将不会被渲染。我尝试在 head 部分插入脚本，它没有工作，还尝试在具有 adl-inside-gate 类的 div 之前插入它，结果相同。这是我的脚本以及 div 和内容：

看看这个页面如何加载它的内容一段时间，然后在延迟一段时间后触发 javascript？http://nomoresnoring.com/new/

我怎样才能让事情加载更顺畅？是否应该重新排序？

标题：

页脚：

我一直在进行响应式重新设计，并试图减少AddThis在被Modernizr查询插入后在页面上呈现我的关注按钮时发生的布局偏移和无样式内容的闪烁。根据媒体查询，AddThis代码要么插入到带有 ID 的 div 中，要么ss1插入ss2. （请参阅上一个已解决的问题。）

AddThis支持建议我隐藏 div 直到呈现按钮。我是一个 jQuery 菜鸟，但我四处挖掘并认为我有一个使用.hideand的部分工作解决方案.show。

这是我的 main.js 中的一个相关片段：

尽管我首先隐藏了ss1和ss2div，但我仍然得到了最初的 FOUC。当我来回调整窗口大小时，它按计划工作。这只是有问题的初始负载。我假设渲染调用initAddThis();和 jQuery.show之间的时间可能checkMq();太短了？

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

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

WebKit 一直让我非常恼火：在页面加载时，它会transition从初始的浏览器默认值动画 a。我有类似的东西

但它会从color: blue! 其他属性不受 FOUC 的影响，只有transitions。

不幸的是，它很难重现，我无法对其进行 jsfiddle 操作。我的（不可否认的边缘）案例是这样设置的：

1. 一个“开发”版本：一堆<script />s 和<style type="text/less" />s
2. 生产版本：脚本和样式H5BP -style concat'ed & minified（lessc分别为第一版）

FOUC 只会出现在情况 2 中，但是在我用 s 内联@import一些样式表的 s 后，这种情况就停止了@font-face。一种解决方法，但它

所以我想这一定与加载时间/订单有关？
有人遇到过这样的事情吗？（我猜不是。）

至少，也许有一天有人会遇到这个问题，并发现这很有用。