css-频繁更改图像，减少服务器请求

css - change an image frequently with less server requests

本文关键字：服务器 请求 图像 css-      更新时间：2023-09-26

我在html中有一个。其内容以css描述。使用不同的函数时，div的类名会更改为imageholder1,2等。

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

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

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

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

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

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

预加载图像，它将缓存图像，并且只请求每个图像一次（它还将允许图像之间更平滑的转换，因为后续图像已经下载）。这将限制您的http请求为每个图像一个请求（这是您在没有精灵表的情况下可以实现的最低请求）。

这里有一个非常好的jQuery解决方案（它不向DOM添加隐藏元素），但实际上任何预加载方案都应该有效：

$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

参考

根据我的说法，如果我们在一个页面上加载多个图像，就会有多个请求。相反，只需使用一个组合所有图像的精灵。这将导致从服务器获取单个图像。然后为类的背景定义css属性，这样它们将具有用于显示所需图像的精灵的不同位置值。

.imageholder1 {
  background: url(/path/to/sprite.png) -60px -120px no-repeat;
}
.imageholder2 {
  background: url(/path/to/sprite.png) -20px -120px no-repeat;
}
相关文章：