css - 预加载 CSS 精灵

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

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

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

这样，您就可以在加载第一个 CSS 之后立即加载浏览器的图像，并且在第二个 CSS 中使用相同的精灵。

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

*= require_tree .

也从中...

Answer 2

我通过添加引用的隐藏图像解决了我的问题chess.svg