CSS Sprites Question

[mauerm]

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?

[jeffman]

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.