异步加载图标

使用 JavaScript 加载 SVG 图标提供了一种在页面上显示图标的非阻塞机制。如果您想更精细地控制图标的显示方式，您可以使用 CSS 和我们的加载事件。

虽然异步图标加载允许页面更快呈现，但它也可以使页面布局发生变化。

您可以通过利用添加到 <html> 标记的一些类作为 JavaScript 引擎执行的加载操作的一部分来避免图标加载和移动您的布局或文本。

<html>
  <head></head>
  <body>
    <i class="fas fa-user"></i> My User

    <script defer src="/static/fontawesome/fontawesome-all.js"></script>
  </body>
</html>

当浏览器开始搜索图标时，<html> 标签将包含 fontawesome-i2svg-pending。（i2svg 是我们将“i 标签转换为 SVG”的缩写）

<html class="fontawesome-i2svg-pending">
  ...

图标替换完成后，挂起的类将被替换为“fontawesome-i2svg-complete”，并且还将添加“fontawesome-i2svg-active”。

<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">
  ...

第一次成功加载图标后，fontawesome-i2svg-active 类将保留。但是，如果加载了另一批图标，complete 将再次切换到 pending。

<html class="fontawesome-i2svg-active fontawesome-i2svg-pending">
  ...

一旦图标替换发生，我们又回到我们的“完成”事件。

<html class="fontawesome-i2svg-active fontawesome-i2svg-complete">
  ...

这允许我们用 CSS 做一些有趣的事情。例如，我们可以隐藏 <body> 直到图标被加载。

body {
  display: none;
}

.fontawesome-i2svg-active body {
  display: initial;
}

如果我们只想在替换图标后显示某些部分。

<main>
  <div>Main section that always shows</div>

  <div class="wait-for-icons">
    <i class="fas fa-camera"></i> I like cameras
  </div>
</main>

.wait-for-icons {
  display: none;
}

.fontawesome-i2svg-active .wait-for-icons {
  display: initial;
}