Pre-load Images In a CSS Menu

I wrote a tutorial about pre-loading images via CSS some time ago. This time we’ll use a slightly different approach. We will go deeper into the use of pre-loading images in CSS menu’s. Before you start, you should have some general HTML and CSS feeling and the source files available, which can be downloaded here.

Why to

So, why should we pre-load images in CSS menu’s. We always have the same problem with the :hover selector. The image added to the, say a:hover class, will not be loaded by the browser until the user hovers its mouse over the link. The browser will need to load the image on the moment of hovering, which takes time to download the image. In this case, the user will not see an image and the menu and so the page doesn’t look how it’s supposed to look.

As you now know why, we’ll move on to the how.

How to

As can be read in the other post, I used the background-image property to pre-load images. In this tutorial, we will use background, together with height and overflow.

Our goal with this tutorial is to load two images in one menu item. The ‘hover’ image will not be showed, the other one will.

HTML structure

We will use the following structure for the HTML document. To make this tutorial a bit easier, I choose to use a standard list, without a submenu. Read more about a menu with a submenu.

<ul>
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Services" href="#">Services</a></li>
	<li><a title="Weblog" href="#">Weblog</a></li>
	<li><a title="Contact" href="#">Contact</a></li>
</ul>

CSS structure

I will not cover all aspects of the CSS menu, because I wrote a tutorial about that subject some time ago. We’ll go through the ul li, ul li a and ul li a:hover classes as there are some noticeable changes compared to a standard menu.

ul li {
    font: bold 11px/16px arial, helvetica, sans-serif;
    height:100%;
    border-bottom:1px solid #fff;
    position: relative;
    float: left;
    width:100%;
    background: top left url(images/background-image.jpg);
    display:block;
}

Usually when you are coding a CSS menu, you’ll add the background image to the ul li a class, but not today with this menu. We will add the background image to the ul li class.

ul li a{
    display: block;
    padding: 5px 10px;
    background-image: url(images/background-hover.jpg);
    background-repeat: no-repeat;
    background-position: 0 -50px;
    height: 100%;
    width: 90%;
}

So, why do we add another background image to the ul li a class? When you take a sharper look, the background image added here is an other image, used for ‘hovering’. With background-position: 0 -50px; we make sure the image is loaded, but not displayed (as the item’s height is around 30px).

The background image is displayed ‘outside’ the visitor’s eye. He isn’t displayed, but it is loaded. We have loaded the image before it is needed; we have preloaded the hover image.

Time to load the hover image on its actual place.

ul li a:hover {
    background-image: url(images/background-hover.jpg);
    background-position: top left;
    color: #fff;
    padding: 5px 10px;
    }

Testing

I have been testing this trick in Internet Explorer 6 and Firefox 2. It works great. You want to see it for yourself? That is possible, because I’ve uploaded the experiments to this website, or you can download the full source.

Pre-load images in a CSS menu
Download the sources