css - 预加载 css Sprite

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 中使用相同的 Sprite 。

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

*= require_tree .

太从它...