问题标签 [fouc]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
6292 浏览

javascript - Cufon 字体替换:如何消除页面加载时出现的无样式文本闪烁?

我正在使用 Cufon 替换我正在处理的网站上选定标题元素的字体,但是每当我加载页面时,在 Cufon 替换文本之前,会出现明显的无样式文本闪烁。我预计我可能做错了。这是我在<head>

这是我在文档末尾的内容:

我究竟做错了什么?提前致谢!

0 投票
4 回答
998 浏览

css - 浏览器在短时间内显示没有样式的页面(视觉故障)

我观察到,Internet Explorer(7 或 8,没关系)很少会在不应用 CSS 的情况下短时间显示我们的网页 ( www.epsitec.ch )。布局看起来完全被破坏了,所有东西都从上到下依次显示。页面完成加载后,所有内容最终都会正确显示。

我们的网页不使用任何花哨的脚本,仅在页面末尾添加了两个用于 QuantCast 和 Google Analytics 的 javascript。顺便说一句,在添加 QuantCast 脚本之前,我们已经遇到了问题。CSS 在该<head>部分中链接:

然后跟随静态 HTML 直到包含 JavaScript 的最后一个块:

由于这是一个非常短暂的视觉故障,我不知道是什么引起了它。更糟糕的是,我无法复制它,而且它只在极少数情况下出现。如何进一步调查故障的原因?有什么我应该注意的最佳实践吗?

0 投票
1 回答
1421 浏览

php - 加载PHP页面时出现短暂的白屏?

什么会导致 PHP 页面加载时出现短暂的白屏?我今天刚刚在我正在构建的 WordPress 主题上注意到它,我想知道这是否值得关注。当页面加载时,屏幕会在显示页面内容之前闪烁白色。有时这发生在每一个页面加载时,有时它只是间歇性地发生。

0 投票
13 回答
54580 浏览

css - 消除无样式内容的闪光

如何停止网页上无样式内容 (FOUC) 的闪烁?

0 投票
1 回答
596 浏览

jquery - jquery图像推子,无样式内容的闪光

www.mymediaventure.com

我无法阻止图像在它们彼此重叠之前闪烁,然后推子开始。

目前,我在除第一张图像之外的所有图像的内联样式属性中将显示设置为无。

然后在 jquery 中显示所有图像。但它会加载图片,然后在不褪色的情况下循环播放每张图片,然后进入褪色状态。

0 投票
4 回答
9905 浏览

php - 页面加载 - 页面之间的白色“闪烁”

有两个网站,一个活一个正在开发中。我正在将一个站点移植到 Zend 框架(出于可维护性/集成目的)。

原始(实时)站点具有无缝页面加载 - 它将加载,然后更新屏幕上的内容,同时保留页面上的背景图像、导航等。

移植的站点(开发)会在短时间内完全“闪烁”白光,然后所有内容同时出现。

据我了解,这不是FOUC(无样式内容的闪存)。两个站点上的内容始终以具有所有 CSS 规则的完整样式显示。这两个站点在渲染时看起来相同,它们使用相同的图像、css 和 HTML 标记。唯一的区别是一个(开发)由 Zend Framework 提供服务,另一个(实时)由过程 PHP 提供服务。

造成这种情况的主要原因是什么,这是 ZF 的已知错误/配置问题吗?我以前没有使用 ZF 就遇到过这个问题,也没有解决。

谢谢你的帮助。

0 投票
2 回答
1729 浏览

css - Firefox 3.5+ 中的 Flash Of Unstyled Content (FOUC)

我们已经走到了尽头,试图克服 Firefox 3.5.x+ 中令人讨厌和间歇性的 FOUC,我们正在开发一个新版本。

我们尝试过:

  • 在 FF 中禁用 Javascript
  • 通过删除 DOCTYPE 使用 Quirks 模式渲染
  • @import额外的 CSS 移动到<link>
  • 打开和关闭串联
  • 从 concat 中删除 CSS 文件,一次一个
  • 在 Firefox 中关闭本地缓存
  • ETC

我们之前的版本从未出现过任何 FOUC 问题,所以这是我们对这个版本所做的事情。到目前为止,我们所做的更改包括:

  • 通过 CSS 提供的所有装饰性图像在数据 URI 上使用 Base64 编码图像。
  • 将与“框架”相关的 CSS 文件与特定于页面的 CSS 分离,并将它们捆绑为两个单独的 CSS 文件

要重现问题...使用 Firefox 3.5.x 或 3.6.x,然后:

  1. 前往: http: //my.publisher-subdomain.env.yola.net/
  2. 使用用户名登录:'stack@yola.com' 和密码:'stackoverflow'
  3. 登录后,您应该在http://my.publisher-subdomain.env.yola.net/sites/
  4. 单击主导航中的帐户链接。
  5. Account 页面应该会加载,并且您应该会看到一个 FOUC。如果 FOUC 没有发生,请清除缓存并重新加载页面。

您的帮助将不胜感激!:)

更新:

开发环境仍在展示 FOUC,但前提是 FireFox 内存不足或安装了很多扩展。延迟和渲染速度肯定会影响这个 FOUC 的可见性。

0 投票
1 回答
209 浏览

jquery - 在 Wordpress 站点侧边栏中使用 jquery 选项卡“闪烁”额外内容

我创建了一个 wordpress 网站,它在侧边栏中使用 jquery 导航选项卡。这是一个非常酷的补充,但我的客户抱怨当页面加载时,您会看到部分列表项加载到所有 3 个选项卡的右侧。到目前为止,我实际上已经在 IE 和 Firefox 中进行了查看。我还不了解这项技术,但是有没有人使用 jquery 函数体验过这种“flash”?这是一个示例页面。

0 投票
1 回答
387 浏览

javascript - Javascript 和 CSS FOUC 预防干扰打印样式表

我正在使用一种简单的技术来防止我的页面上出现 FOUC。我的页面上有一个“反馈”滑动按钮,最初在我的样式表中设置为 display:none。稍后,当加载 JS 并加载滑动代码时,我将 .css('display', 'block') 与 jQuery 一起应用。这完美无缺。

但是,当有人打印页面时,我的滑动按钮及其内容会显示在打印版本中,即使我在 print.css 中为 DIV 声明 display:none。我怎样才能解决这个问题?

0 投票
3 回答
3374 浏览

php - 如何在动态生成的 jQuery UI 选项卡上避免 FOUC

我使用 jQUery UI 选项卡动态创建多个选项卡——这些选项卡是使用foreach视图页面上的 a 创建的,如下所示(一些 codeigniter 标记):

如上所述,标签形成良好。问题是无样式内容的好 ol' Flash。它发生在 IE、Chrome、FF 上。

我已经尝试过 jQuery 文档中的 CSS 选项,但没有成功。

有一个简单的 JS 插入一个 CSS 样式<head>,然后应用{display:none}一个特定的id- 但这使我的面板消失,等待用户交互。我需要加载时用户可以看到第一个面板,以及顶部的其他选项卡——没有该死的 FOUC。

有谁知道如何在 jQuery UI 选项卡上明确解决 FOUC?它真的看起来不太好,如果我无法解决这个问题,我可能不得不完全放弃标签。

非常感谢任何指针/路线图!