What is the need of preload the image ?
Pseudo-selectors like :hover, :focus and :active will become more widely used in website designing. One common problem is the rollover image getting downloads only when that event fire., but all the necessary images must be downloaded already, Otherwise the rollover will behave badly.
So here we are going to discuss two methods to handles rollover image loading
Fast Rollovers Without Preload
In this method we are going to use single background image for both rollover and non-rollover images. which means combine both images in to a single image, and then position using the background position css property (CSS Sprite technique). So instead of changing the image when mouse over the element we simply change the background position to reveal the rollover image.
CSS Image preloaded method
Downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.
So you need to create one class with the background image property., Use the rollover image as a background image and hide that element by using background position property as seen below.
.load_image
{
background-image: url("rollover-image.jpg");
background-repeat: no-repeat;
background-position: -1000px -1000px;
}
<div class="load_image"></div>
Your rollover image will be loaded while the page was loading. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.
