CSS Sprite - 每次调用类时都会加载图像

Question

我有我的HTML，我添加了famfamfam sprite：

<link rel="stylesheet" href="resources/css/famfamfam.css">

我的CSS有这样的样式：

.fam{display:inline-block;height:16px;width:16px;background:url('../images/famfamfam.png') no-repeat 0 0;vertical-align:baseline;}

.fam.accept{background-position: -0px -0px}
.fam.add{background-position: -16px -0px}
.fam.anchor{background-position: -32px -0px}

因此，为了添加图像，可以这样做：

<span class="fam add">Hello</span>

我知道我的问题可能听起来很愚蠢，但是：

  

每次添加元素都会加载famfamfam.png吗？或者精灵是如何工作的？我不想过度杀死我的页面。

Answer 1

如果我理解你的问题：

• 如果您在页面上使用带有.fam类的多个元素，浏览器将不会再次重新下载精灵图像。
• 如果您的服务器配置得很好，浏览器会在图片下载后对其进行缓存，在后续页面浏览中，它会重复使用缓存的图片，而不是重新下载。

所以，只要精灵的主要.png是合理的大小，就不必担心了。