javascript - css - 以较少的服务器请求频繁更改图像

Question

我有一个 html 格式的。它的内容在css中描述。使用不同的函数，div 的类名更改为 imageholder1、2 等。

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

但我认为这会导致多次服务器请求，每次更改类名。

有没有办法减少服务器对图像文件的请求。我想要一种将图像存储到变量中然后从 css 代码指向它的方法。可能吗？

我也尝试过使用 css 图像 Sprite ，但我需要一种更灵活的方式。

Answer 1

如果您将所有图像放在一个隐藏(不显示)div 中，它们将同时加载。浏览器应该缓存它们，这样每次更改时，它都会从客户端系统中提取。

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