css - 什么可能导致我的伪元素 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