css - change an image frequently with less server requests

Question

I have a in html. Its content is described in css. With different functions the classname of the div is changed to imageholder1,2 etc.

.imageholder1 {      content: url('image1.png')}
.imageholder2 {      content: url('image2.png')}

But I think this causes multiple server requests , each time the classname is changed.

Is there a way to reduce the server requests to the image file. I would like a way to store the image into a variable and then point it from css code. Is it possible?

I also tried to use a css image sprite but I need to need a more flexible way.

Answer 1

If you put all your images in a hidden (display none) div, they'll load all at once. The browser should cache them, so then each time it changes, it pulls from the client system.

<div style="display: none;">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>