CSS Tip: Preloading Rollover BG Image

I encountered an issue today, I created a nav bar for a client project and used the "background-image" to change on :hover for creating a roll-over effect using CSS. But when I showed the client the page, He asked me to pre-load the hover images so that there is no interruption when the user put his mouse over the buttons. As my nav buttons are all different in size so I had to use around 5 different images for every button.

I crawled the web and found a great simple solution that I want to share. We create a div for every background image and define a class in css  to pre-load the background image and assign the property visibility: hidden; to the class so that the DIVs with the pre-loaded images will not appear on the page.

So I created five classes for five buttons and assign every class to the DIVs in my HTML Document.

.imgLoader {
    background-image:url(images/nav/home-menu_bg-over.png);
    visibility:hidden;
}
.imgLoader2 {
    background-image:url(images/nav/catering_bg-over.png);
    visibility:hidden;
}
.imgLoader3 {
    background-image:url(images/nav/bar-b-q_benefits_bg-over.png);
    visibility:hidden;
}
.imgLoader4 {
    background-image:url(images/nav/locations_bg-over.png);
    visibility:hidden;
}
.imgLoader5 {
    background-image:url(images/nav/about_bg-over.png);
    visibility:hidden;
}

 In this way, we have preloaded all the hover state images and when we set it as hover image for our links, it does not load from the start.

pretty-cool.... :)