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"}}');
}

- John R

---

{{ asset }}语法是什么？它是如何转换为实际的CSS并在何时运行？ - Robert Longson

使用内联SVG可能有助于您的情况。加载时间将减少，因为HTTP请求较少; 但是，您必须考虑到这些SVG不会缓存。 - Tedds

我也遇到了这个问题，即使是内联SVG，它们总是在页面最后加载。 - dessalines

Answer 1

您可以直接将SVG写入HTML中。这将强制它与页面的其余部分一起加载。

- EKW

---

这个可以运行，但我不想直接插入到HTML中，因为我要与其他组件共享它，并且不想到处粘贴，因为更新意味着更新所有文件而不是单个文件。 - Waleed Ahmad