【发布时间】：2018-02-11 03:14:41
【问题描述】：
我在一个网站上有几个 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"}}');
}
【问题讨论】：
-
什么是 {{ assets }} 语法？是什么将其转换为实际的 CSS 以及何时运行？
-
使用内联 SVG 可能会对您的情况有所帮助。加载时间会减少，因为 http 请求会减少；但是，you must take into account that those SVG won't cache.
-
我也遇到了这个问题，即使是内联 SVG。它们总是在页面上最后加载。