加载页面时减少或消除字体真棒的SVG闪烁

时间:2019-06-05 10:26:52

标签: svg font-awesome font-awesome-5

我们刚刚购买了专业版,并切换到了SVG,因为图标看起来更漂亮了。

但是,每个页面在加载图标时都会出现闪烁问题。

我通过确保在加载图标时页面不会重新调整大小来减轻了它的震撼性(就像以前带有图标的文本将加载在容器顶部的文本一样,然后图标加载会将其向下移动)。

但是,这仍然令人不快。这些问题在CSS版本中并未发生。

特别是:

  • 有什么方法可以最大程度地减少我没想到的这种影响
  • 能否以某种方式在加载页面之前强制加载svg?字体真棒的引用是一个javascript文件,但我已经将其放在顶部的<head>中。
  • 我们可以将页面加载延迟到准备就绪吗?
  • 是否有一种混合解决方案,它最初加载CSS版本,但是在svg版本加载时替换它们?

2 个答案:

答案 0 :(得分:0)

不确定我们是否遇到相同的问题-我遇到了一个问题,即SVG图标在加载时闪烁。

This ended up resolving it for me.

答案 1 :(得分:0)

在加载图标时,似乎已经在标头中添加了一些类,这些类可用于尝试减少图标的讨厌加载。

https://fontawesome.com/how-to-use/on-the-web/advanced/svg-asynchronous-loading