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

【问题标题】：css - change an image frequently with less server requestscss - 以较少的服务器请求频繁更改图像
【发布时间】：2014-11-12 22:09:44
【问题描述】：

我有一个 in html。它的内容在 css 中描述。使用不同的功能将div的类名更改为imageholder1,2等。

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

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

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

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

【问题讨论】：

我很确定这个问题的答案是否定的，因为您需要以某种方式获取这些图像，因此您总是需要为每张图像提出请求.您可以在 $(document).ready() 上进行操作，但您仍然需要在某个时候进行操作

标签： javascript html css image class

【解决方案1】：

如果您将所有图像都放在一个隐藏（不显示）div 中，它们会一次全部加载。浏览器应该缓存它们，所以每次它发生变化时，它都会从客户端系统中拉取。

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

【讨论】：

但是我如何将它与 css 一起使用。我需要一次显示 image1，然后像这样显示 image2。
如果您事先知道将使用的所有图像，那么您可以将其粘贴到 HTML 文档中的任何位置。然后当 CSS 改变时，浏览器已经有了图像。这就是我在www.tecbrat.com进行翻转的方式@
这是否意味着如果图像被加载一次，它会从缓存中重用，即使 css 指向源文件 url？
是的。浏览器应该“知道”它已经拥有该文件，因此不会再次从服务器请求它。

【解决方案2】：

预加载图像，它会缓存图像，并且只请求每个图像一次（它还允许图像之间更平滑的过渡，因为后续图像已经被下载）。这会将您的 http 请求限制为每个图像一个请求（在没有精灵表的情况下可以达到的最小值）。

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

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

$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");

Reference

【讨论】：

【解决方案3】：

据我说，如果我们在一个页面上加载多个图像，它将有多个请求。取而代之的是简单地使用组合所有图像的精灵。这将导致从服务器获取单个图像。然后为类定义 background 的 css 属性，以便它们具有不同的 sprite 位置值，从而显示所需的图像。

.imageholder1 {
  background: url(/path/to/sprite.png) -60px -120px no-repeat;
}

.imageholder2 {
  background: url(/path/to/sprite.png) -20px -120px no-repeat;
}

【讨论】：

感谢您的方法，但我尝试了 css 图像精灵并且它不灵活 - 我需要稍后通过代码调整这些图像的大小。在那种情况下，事情就变得复杂了。我正在寻找一种更简单的方法:-)