Question

I created and coded my own css navigation bar (inspired by apple, if that helps you visualize), that means i have dynamic buttons with 4 states that i manage with a css stylesheet. I only have two graphics, one with the button states, and another with the stylized “text”.

However, i’de like to make it so that the nab bar’s graphics are preloaded in my webpages.

1) is this possible ?

2) is it useful ?

3) if yes to both questions what would be the code ?

Answer 1

I don’t really see the point in preloading those images. If the images are static and always refer to the same file without parameters, they will be cached anyway by the browser and only loaded the first time a visitor comes to your site (unless you prevent caching with some fancy http header settings), and served out of the clients browser cache on further requests. Do you have an example of your navigation to look at?

if you are concerned about loading times your could quite easy have a navigation similar to apple.com by using css3-gradients for the background, border radius for the outer container and only declare a background-image in you IE stylesheet as fallback option, so modern browsers wont requests the IE background pattern.

Add some 1px offset text-shadow to give your navigation some 3d look.