什么可能导致我的伪元素 SVG 图标出现这种 FOUC？答案

【问题标题】：What might cause this FOUC for my pseudo-element SVG-icons?什么可能导致我的伪元素 SVG 图标出现这种 FOUC？
【发布时间】：2016-03-17 09:59:31
【问题描述】：

我对本网站上的伪元素的 FOUC 有疑问：

每个菜单选项的代码：

<div class="module">
  <a href="https://example.com/concierge/questions-about-oslo" class="headermenu__link headermenu__about-city active">
    <p>Questions about&nbsp;Oslo</p>
  </a>
</div>

我为每个 .module 赋予它的图标，并带有这样的伪元素：

a.headermenu__link:before {
  display: block;
  width: 3.3em;
  margin: auto;
  margin-bottom: .5em;
}
.headermenu__about-city:before {
    content: url(./images/menu-icons_about-the-city.svg);
}

【问题讨论】：

标签： css svg background-image

【解决方案1】：

似乎问题在于我将 SVG 插入到我的内容属性中，如下所示：content: url(./images/menu-icons_about-the-city.svg);。显然，最好将其用作背景，这使得它的渲染速度方式更快。

我的新代码现在如下所示：

a.headermenu__link:before {
  display: block;
  margin: auto;
  margin-bottom: .5em;
  height: 4em;
    background-position: center;
}
.headermenu__about-city:before {
  content: '';
  background: url(./images/menu-icons_about-the-city.svg) no-repeat;
}

【讨论】：

在您的网站上为我呈现几乎相同的效果。更快，但仍然很流行。
啊！您关心的是文本移动吗？
不，问题是图标的弹出/闪烁/闪烁。之前的闪烁时间更长，更糟糕的是，当它们弹出时，整个页面都跳了下来。现在它只是轻微的闪烁，与大多数网页一样。
是的，我就是这个意思。

【解决方案2】：

我查看了您的网站。我相信这只不过是浏览器渲染，我本来建议将 SVG 直接放入 CSS 中，但我不确定它是否会有所帮助。

我认为您只需要隐藏整个元素，直到使用 JavaScript 呈现所有外部内容。例如：

$(window).load(function({
  $('.module').fadeIn();
}));

然后在 CSS 中隐藏.module。

【讨论】：

他们不应该被缓存吗？它们非常小，最大的一个（gif 中的那个）是 973 字节。
谢谢，Chuck，试过了，但没有用。这不会只是复制 FOUC 行为 - 即折叠父元素直到所有内容都被渲染？
感谢您的努力。原来我的问题是我在内容属性中插入了 SVG，而不是使用它作为背景。