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;
}
1
  • 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, 2012 at 10:38

2 Answers 2

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...

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.