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>

我知道我的问题听起来很愚蠢，但是:

Does every time that I add a element does the famfamfam.png is loaded? Or how does sprite works? I don't want to over kill my page.

Answer 1

如果我正确理解你的问题:

• 如果您在一个页面上使用多个带有 .fam 类的元素，浏览器将不会再次重新下载 Sprite 图像。
• 如果您的服务器配置良好，浏览器会在图片下载后缓存该图片，并且在后续的页面浏览中，它会重复使用缓存的图片而不是重新下载。

所以，只要 sprite 的主要 .png 大小合理，就没什么好担心的。