html - 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。这将强制它与页面的其余部分一起加载。