3 ways to preload CSS background image

Solution1: CSS Sprite

PROS：

• Supports each browser with each version
• Reduces http requests

CONS:

• Should be able to use SASS + Compass to generate CSS sprite or it will be difficult to maintain your sprites.

Solution2: JsPreload

PROS:

• Supports each browser with each version

CONS:

• Based on Javascript
• Have to make sure there’s no redundant background image in target folder to avoid useless requests

Solution3: convert to DataURI

PROS:

• CSS styles and images are merged in to one file. Don’t need to upload images when deploying/
• Reduces http request.

CONS:

• Do not support IE6-7(need MHTML as workaround). IE8 has 32K limitation for one image file.
• May increase image size.
• Should be able to use SASS + Compass to convert image to DataURI

Reference:

• http://jonraasch.com/blog/css-data-uris-in-all-browsers
• http://josephjiang.com/entry.php?id=345
• http://mjj.logdown.com/posts/92910-a-scss-mixin-that-convert-background-images-from-original-url-path-to-datauri