SyaZ 0

I'm using sprite and it seems they are being loaded the number of times they are used... which defeats the purpose of spriting at the first place. Why? I am using background: url() for the sprites.

Aren't browsers smart enough to know they're the same images? For example I use some 30+ blank images in element as placeholder for sprite later. That blank images gets loaded 30+ times the first time around. Is this expected?

  • What evidence do you have for the multiple retrieval? Are you actually monitoring the data stream with a packet filter, or just looking at the counter on the progress bar? Resources are "counted" even if they are being retrieved from the cache. — Richard Grevers over 3 years ago
  • Firebug NET panel. It records requests that return 200 status OK, not 304 NOT MODIFIED, on first time load (not from cache). — SyaZ over 3 years ago

1 answer

Simon 75
2
points
This was chosen as the best answer

Are you importing the image in separate places?

So you have your element declarations at the top of your CSS where you define stuff you want to apply a bg-image to.

element1, element2, element3, li.sponge { background:url(/img/sprite.gif) no-repeat; }

Then we get specific lower down in the code

element1 { background-position: 0px 0px; }

element2 { background-position:0px 100px; }

etc.

Forgive the crudeness of the example, just checking. Hope it was that simple.

Answered over 3 years ago by Simon
  • Thanks, that's the problem, I should define the url at a higher level and only change position at the specific levels. — SyaZ over 3 years ago