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

Question

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

Nib*_*Pig 5 svg font-awesome font-awesome-5

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

然而，我们在加载图标时每个页面上都存在一些闪烁问题。

我通过确保图标加载时不会调整页面大小，稍微减轻了它的不和谐性质（就像之前带有文本的图标将在容器顶部加载文本一样，然后图标加载将向下移动）。

但它仍然有点令人恼火。CSS 版本不会出现这些问题。

具体来说：

有没有什么办法可以最大限度地减少这种影响，我没有想到
我们可以在加载页面之前强制加载 svg 吗？对 font Awesome 的引用是一个 javascript 文件，但我已经将其放入<head>顶部。
我们可以延迟页面加载直到它准备好吗？
是否有一种混合解决方案，它最初加载 CSS 版本，然后在加载 svg 版本时替换它们？

Answer 1

Col*_*ins 2

FontAwesome 已承认此问题，并在此处记录了推荐的解决方案：

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

FontAwesome在标签中添加了几个类html（当使用SVG+SJ 方法时），可以利用这些类来减少/消除加载图标引起的移动。

加载图标时，该类fontawesome-i2svg-pending将添加到html标记中。一旦它们被加载，该类将被删除并替换为fontawesome-i2svg-complete和fontawesome-i2svg-active。

因此，您可以轻松地使用 CSS 隐藏移动部分，直到加载图标为止，如下所示：

<html>
  <body class="wait-for-icons">
    <p>some initially hidden content</p>
    <i class="fa-solid fa-frog"></i>
  </body>
</html>
    
<style>
  .wait-for-icons {
    display: none;  
  }

  .fontawesome-i2svg-active .wait-for-icons {
    display: initial;
  }
</style>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，8 月前
查看次数：	2294 次
最近记录：	3 年，2 月前