CODEWITHSUNDEEP
csssprite
mohamida
mohamida

Reputation: 804

Loading sprites 1 time, or many times?

I'm wondering, if i'm doing this: 

<div style="width:50px;height:50px;background: transparent url(sprite.png) 0px 0px no-repeat;">555</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -56px 0px no-repeat;">666</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -109px 0px no-repeat;">666</div>

Is this going to download the image 3 times ?

or is it going to download the image 1 time, and show different parts of it in the web page ?

Upvotes: 4

Views: 166

Answers (4)

Nic Bell
Nic Bell

Reputation: 523

It will be downloaded once unless cache is turned off, get Firebug and watch the HTTP requests then you'll get a better idea of what happens when the page loads.

Upvotes: 2

Kyle
Kyle

Reputation: 67194

It downloads the image 1 time only, and displays a portion of it in the different elements :)

It's explained in more detail at A list Apart's CSS sprites article.

Upvotes: 4

fredley
fredley

Reputation: 33891

It'll only be downloaded once, don't worry.

Upvotes: 1

oezi
oezi

Reputation: 51797

browsers should download it one time except you're setting some ugly kind of no-cache-header-things

Upvotes: 3

Related Questions