css - cssスプライトのプリロード

Question

chess.svgへの次の参照を持つcssファイルがあります。最初にcssファイル全体がダウンロードされるのを待たずに、chess.svgスプライトおよびその他のcssイメージのダウンロードを開始する簡単な方法はありますか？重要な場合は、RubyonRailsを使用しています。

.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がロードされた直後にブラウザーによって画像がロードされ、同じスプライトが2番目のCSS内で使用されます。

これを機能させるpreloadには、メインのapplication.cssにファイルを含めないので、

*= require_tree .

それからも...

Answer 2

参照する非表示の画像を追加することで問題を解決しましたchess.svg