SVG图像加载缓慢或在站点中最后一次加载

Question

我在一个网站上有几个SVG背景。他们的大小小于50kb，但是，他们加载速度很慢，或者说，他们似乎加载在网站上的最后一个元素。因为它们在页面的页眉上，所以我不想在加载图像时留出空格。我一直在试图找到为什么会发生这种情况的答案或原因，并对svgs进行优化，但似乎找不到解决方案。我的背景是大约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中。这将强制它与页面的其余部分一起加载。