html – 在站点中加载缓慢或最后的SVG图像

2023年3月3日 319次阅读

我在网站上有几个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"}}');
}

最佳答案 你可以直接把svg写入html.这会强制它与页面的其余部分一起加载.

点赞