SVG图像加载缓慢或持续在站点中

Question

我在网站上有几个SVG背景。它们的大小小于50kb，但是加载速度很慢，或者它们似乎是网站上的最后一个元素。由于它们位于页面的页眉上，因此在加载图像时我不需要空格。我一直在尝试寻找答案或原因，以解决此问题并优化svg，但似乎找不到解决方案。我的背景为白色约2-3秒，然后出现SVG。

我正在CSS中内联加载SVG

这就是我的HTML

<div class='header-main'>
  <div class="header">
    <hr></hr>
    <h1 class="tagline">Some Text</h1>
  </div>
</div>

加载SVG的CSS为：

.header-main {
  background: url('{{ asset "/img/background-main.svg"}}');
}

Answer 1

您可以将 svg 直接写入 html 中。这将迫使它与页面的其余部分一起加载。