0

I have a css file with the following reference to chess.svg. Is there a simple way to get the chess.svg sprite and other css images to start downloading without having to first wait for the entire css file to download? If it matters I am using Ruby on Rails.

.piece {
  background-image: image-url('chess.svg');
  background-repeat: no-repeat;
  background-size: 384px 128px;
  width: 64px;
  height: 64px;
}
user782220
  • 10,677
  • 21
  • 72
  • 135
  • I'm no CSS expert but I usually include all suitable icons to a single sprite (duh!) and show at least one icon in initial page. You can however preload images using JavaScript. – AKS Oct 29 '12 at 10:38

2 Answers2

0

Never thought about it, but how about making a very small css file with only the sprites, and loading it outside the main application.css? 

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

This way you'd have the images loaded by the browser just after the first css is loaded, and the same sprites would be used within the second CSS.

To make this work you don't include the preload file in the main application.css, so remove any 

*= require_tree .

too from it...

rewritten
  • 16,280
  • 2
  • 47
  • 50
0

I solved my problem by adding a hidden image that references chess.svg

user782220
  • 10,677
  • 21
  • 72
  • 135