CSS Image preloading
One big reason for using an image preloading embankment as is if you want to use an image for the background-image of an element on mouseover or hover. If you just apply the CSS background-image to hover, the images will not load until the hover and thus there will be a short delay between the mouse annoying on the actual image area of the image to appear.
Technique # 1
Loading images on ordinary elements, only shifted far to the background position. Then move the background to display on hover.
If the element in question already has a background-image effect, you only need to change that image, because the above trick will not work. Usually you will be faced with the sprite here (background images combined) and only shift the position of the background. But if that's not possible, try to Apply the background image for the page elements that have been used, but does not have a background image.
Technique # 1
Loading images on ordinary elements, only shifted far to the background position. Then move the background to display on hover.
Technique # 2#grass { background:url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background-position: bottom left; }
If the element in question already has a background-image effect, you only need to change that image, because the above trick will not work. Usually you will be faced with the sprite here (background images combined) and only shift the position of the background. But if that's not possible, try to Apply the background image for the page elements that have been used, but does not have a background image.
essentially create a new page element that will be used for this technique may appear at the start preloading load the image, such as # preload-001, # preload-002, but it was somewhat against the spirit of web standards. Therefore the use of existing page elements on your page.#random-unsuspecting-element { background:url(images/grass.png)) no-repeat -9999px -9999px; } #grass:hover { background:url(images/grass.png) no-repeat; }