【问题标题】: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,而不是使用它作为背景。
    猜你喜欢
    • 2012-02-09
    • 1970-01-01
    • 2019-04-30
    • 1970-01-01
    • 2019-07-18
    • 2012-12-31
    • 2020-03-08
    • 2012-04-20
    • 2020-04-15
    相关资源
    最近更新 更多