Question

我有一个css文件，其中包含对chess.svg的以下引用。是否有一种简单的方法可以让chess.svg sprite和其他css图像开始下载而无需先等待整个css文件下载？如果重要的话我正在使用Ruby on Rails。

.piece {
  background-image: image-url('chess.svg');
  background-repeat: no-repeat;
  background-size: 384px 128px;
  width: 64px;
  height: 64px;
}

Answer 1

从来没有想过这个，但如何制作一个只有sprite的非常小的css文件，并将其加载到主application.css之外？

<%= stylesheet_link_tag "preload", media: "screen" %>
<%= stylesheet_link_tag "application", media: "all" %>

通过这种方式，您可以在加载第一个css后立即加载浏览器，并在第二个CSS中使用相同的精灵。

要完成这项工作，您不要在主application.css中包含preload文件，因此请删除任何

*= require_tree .

也是......

Answer 2

我通过添加引用chess.svg

的隐藏图片解决了我的问题