问题标签 [fouc]

我正在为我的网站上的一些无样式内容而苦苦挣扎。首次访问它时，您会在实际加载到屏幕之前看到未设置样式的内容：

您可以在这里亲自查看：http: //galaxynode.com

我不精通html，所以我需要一些详细的帮助：

这是我的代码：

有人能准确地告诉我我可以在这里放什么来阻止东西显示直到它完全加载吗？任何修复都会很棒！我不知道 html，所以请告诉我我可以在这里输入的确切内容，或者在不了解 html 或 javascript 的情况下可以理解的内容。

我目前使用 requirejs 主要是因为它的资源加载器。我喜欢它管理后备的方式。

我的 javascript 应用程序一点也不复杂，只是一些 jQuery UI 小部件和其他小的调整。

在我开始使用 requirejs 之前，我什至不知道 FOUC 是什么。这是非常明显的，所以目前我正在避免它：

在我的脚本中：

这是我所拥有的最好的，我发现的所有关于该主题的在线资源都推荐了这些方面的内容。

我的问题是，考虑到我说的是只影响 UI 的脚本，requirejs 值得吗？正如我所说，我想继续使用它的资源后备系统，但整个“FOUC 补丁”似乎适得其反......

每个 jQuery UI 示例都在头部包含脚本，但互联网上的每个人都建议在关闭正文或使用异步加载器之前包含脚本。此建议是否仅适用于“非 UI”脚本？

在这种情况下什么是最好的？

请注意，即使很接近，这不仅仅是另一个“如何避免 FOUC 问题”。

编辑：添加包含在我的页面和我的外部文件require.config：

在 main.js 中：

我注意到 Twitter 源代码顶部附近的以下内容：

一个快速的谷歌搜索出现了一些使用它的其他网站，但我找不到任何描述它的用途的东西。使其成为如此受欢迎的网站的标记（由于使用了条件HTML类而多次启动）必须使其对某些东西有用。

我熟悉“无样式内容的闪存”又名“FOUC”的概念，但我很好奇这段代码具体与什么相关。

我有一个开发网站，我正在 wordpress 上构建（a href="http://scottmcrae.thecrossagency.net/">开发网站，使用 DRY 主题（这里是原始主题）。原始主题有一个预加载器 - 我禁用了这是因为该网站加载它的时间比关闭它的时间长,并且当用户在底部提交联系表单时它也会再次刷新/预加载页面.当我加载页面时,导航栏区域首先加载更高的高度或更多填充/边距（无法分辨），然后在片刻后快速调整为适当的大小。我该如何解决这个问题？

谢谢！

当 HTML5 页面在 Safari 移动设备中加载时，在内容显示之前会有瞬间的白色闪烁。有点像旧的“无样式内容闪现 (FOUC)”问题，但使用的是白屏……称之为“闪白 (FOW)”问题。

还有人看到这个吗？我怎样才能摆脱它？我已经尝试了我能想到的一切：

1. 在我的第一个样式表的顶部将主体背景颜色设置为黑色。

2. 将主体背景颜色设置为黑色，在头部上方，带有单独的样式标签：

   /li>

3. 在我绝望的情况下，我什至求助于在标签中添加（喘气！）内联样式：

   /li>

似乎没有任何效果......每次加载页面时，我都会得到这种恼人的白色闪光。

有任何想法吗？谢谢，基思 :^)

我在我测试过的任何其他浏览器（IE、Chrome、Opera）中都没有看到这个问题，但是每当我从服务器加载页面时，我都会在应用 CSS 之前看到一闪而过的无样式内容。

这甚至发生在应该缓存所有内容的后续页面加载中 - 每次页面加载时，我都会在一瞬间看到无样式的内容，然后一切都解决了。

还值得注意（也许？）该页面正在使用 @font-face 来提取一些 Google 字体。它们存储在一个单独的样式表中，在主响应式样式表和媒体查询之后被拉出。

我尝试了一些不同的东西，但没有效果：

• 重新排列 CSS 样式表链接的顺序
• 使用@font-face 删除样式表的链接
• 禁用萤火虫？（请在此处阅读……）

可能值得一提的另一件事是，我在页面的 CSS 中使用了相当多的 Element Type CSS 选择器。这可能会减慢渲染过程吗？

这似乎不太可能，因为在更改窗口尺寸后立即重新渲染页面没有问题 - 响应式内容立即呈现良好。

所以这让我相信 CSS 的加载方式存在一些问题。

这是我的头代码：

WTF 是 Firefox 出了问题？快把我逼疯了！

我创建了一个基于 ngResource 的手风琴（用于实时/ajax 数据）。一切正常，但手风琴在加载时闪烁（两次）。我怎样才能阻止这个？

这是我的代码（服务）：

}]);

这是我的模板：

PS：我不知道它是否相关，但在我的手风琴中，我还有一个使用与手风琴相同的数据的选项卡（从上面的示例中可以看到）

有任何想法吗？

我使用 Polymer.js 制作了一个网站，并广泛使用模板。

URL 端点页面上几乎没有，并且导入了一个充当母版页的模板，并且在每个页面上我都导入了其他元素模板，用于页眉、页脚等。

这允许非常快速的页面构建，我喜欢它的工作方式。它有点像客户端CMS

但我似乎无法摆脱 FOUC ！页面闪烁严重。

Body unresolved本来是要工作的，但它的失败很惨。有人可以看看并提出建议。

这是 git hub 上的根目录。 https://github.com/bmadmin/bm-www/tree/master/public/project/hempbuild

我正在使用以下 JS 以一种对 SEO 友好的方式避免出现无样式的内容：

其中也有附带的 CSS: <style> .fouc {display:none;}</style>。

我期望发生的是，在页面加载时，我的 div #Container 至少应该在类 .fouc 添加，但是，只有当我通过控制台手动添加它时才会发生这种情况。

我是否需要一些额外的代码等才能使其按预期运行？

仅供参考，在调用此脚本之前，我已经在调用 JQuery。

感谢您的帮助！

我有一个页面，其中包含从正文中的数据库中提取的一些内容，在头部我有一个链接到格式化该内容的外部样式表。在 Safari 上（在 Chrome 或 Firefox 上似乎没有）我得到了一个可爱的无样式内容的闪光。

我宁愿对此进行非javascript修复，有没有办法定位外部css工作表链接，以便在php脚本在正文中运行之前应用它？- 我认为它会自动执行此操作，但显然不是在野生动物园中，有什么想法吗？

一秒钟左右，我看到了这个：

然后之后：