Preloading:
A sprite sheet is just an image, so preload like you would any other image. That said, a "jQuery way" would be:
var $mySprite = $("<img>").attr("src", "myURL");
(Source: Preload a spritesheet using Jquery)
Applying to elements:
No need to use javascript as this can be done with simple css.
1 - Add a sprite
class to every element that uses the spritesheet:
html: <div class="sprite">
css: .sprite { background-image:url("your spritesheet url here") }
2 - Add ids to your elements, and then matching css background-position
rules, according to the location of the specific element's image on the spritesheet. e.g.
html: <div class="sprite" id="fire"></div>
css:
#fire {
background-position: -100px -50px;
height: 20px;
width: 40px;
}