Glyphicons在镀铬时闪烁

Question

我正在使用Bootstrap glyphicons.它们工作得很好,但是使用Chrome浏览器,当页面加载时,glyphicons会闪烁

例如:

1. 在Bootstrap上打开此链接:
   • http://getbootstrap.com/components/#glyphicons-glyphs
2. 加载后,按F5或刷新.
3. 你会看到glyphicons眨眼.

我怎样才能修复它们以免眨眼？

这是一个截图:

注意:这仅发生在Chrome中,而不是FF或IE.

Answer 1

通常,这是具有无格式内容(FOUC)闪现的问题.

具体来说,这就是保罗·爱尔兰所谓的无格式文本(FOUT):

在Firefox中,基本上文本是默认的webfont,直到自定义字体准备好

Webkit采用了一种非常不同的方法,而且非常有意.他们认为在字体准备好之前保持文本不可见更好.这样,文本就不会闪现到新升级的自我中

换句话说,这个问题并不容易克服.

您可以尝试通过以下方式最小化影响:

• 使用gzip缩小文件,使其下载更快
• 使用缓存,以便客户端可以使用现有副本而不是抓取新副本.

沉重的方法是等待向用户显示页面,直到所有内容都被渲染,但我强烈建议不要这样做.用户对初始加载时间非常不耐烦,但在渲染其他内容时却非常宽容.