加载精灵1次，或多次？

Question

我想知道，如果我这样做：

<div style="width:50px;height:50px;background: transparent url(sprite.png) 0px 0px no-repeat;">555</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -56px 0px no-repeat;">666</div>
<div style="width:50px;height:50px;background: transparent url(sprite.png) -109px 0px no-repeat;">666</div>

这会下载图像3次吗？

或是要下载图像1次，并在网页中显示它的不同部分？

Answer 1

它仅下载图像1次，并在不同的元素中显示它的一部分：）

在A list Apart的CSS sprites文章中有更详细的解释。

Answer 2

浏览器应该下载一次，除非你设置了一些丑陋的no-cache-header-things

Answer 3

除非关闭缓存，否则将下载一次，获取Firebug并观察HTTP请求，然后您将更好地了解页面加载时会发生什么。

Answer 4

它只会被下载一次，不用担心。