什么可能导致我的伪元素 SVG 图标出现此 FOUC？

Question

我对本网站伪元素的 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);
}

Answer 1

我看过你的网站。我相信这只不过是浏览器渲染，我打算建议将 SVG 直接放入 CSS，但我不确定它是否有帮助。

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

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

然后在CSS中隐藏.module。

Answer 2

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

我的新代码现在看起来像这样：

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;
}

什么可能导致我的伪元素 SVG 图标出现此 FOUC？

What might cause this FOUC for my pseudo-element SVG-icons?

css

svg

background-image