Jump to content

CSS Sprites Question


mauerm
 Share

Recommended Posts

From my understanding, sprites allow the use of 1 image to be loaded instead of loading 2 or 3 for navigation, i.e. hover image swaps, and images that show the currently viewed page, etc. I thought the sprite was loaded one time, however here W3 Sprite Tutorial it shows that the image is loaded each time for every <li> link.

<style type="text/css">#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}#navlist li, #navlist a{height:44px;display:block;}#home{left:0px;width:46px;}#home{background:url('img_navsprites.gif') 0 0;}#prev{left:63px;width:43px;}#prev{background:url('img_navsprites.gif') -47px 0;}#next{left:129px;width:43px;}#next{background:url('img_navsprites.gif') -91px 0;}</style>

Surely I am thinking about this in the wrong way but doesn't that seem like I might as well just load 3 images if I am going to do that? To me it looks like each button (#home, #prev, #next) is loading img_navsprites 3 times vs. 1 time and moving the position? Could someone set me straight?

Link to comment
Share on other sites

The browser knows what to so. The image is loaded once only and stored in cache. This is actually the reason why sprites are a good idea, so there is just one download. Without that, the first time a rollover effect happens, you would have to wait for the next image to download. No one likes that.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...