大型CSS精灵是个好主意吗？

Question

我有一个很大的CSS Sprite，在我的高速互联网上加载大约需要3秒钟。我想知道这是不是一个好主意。

除此之外，我还想知道是否应该显示实际精灵正在加载的精灵中只有一位的较小图像。虽然这意味着两个HTTP请求而不是一个，但我想知道它是否能提供更好的UI /用户体验，如果我在文档加载时使叠加层消失了。

Answer 1

大到多大？ 3秒似乎很荒谬。如果你在阳光下加载每个图像然后没有，这不是一个好主意。您可能还需要查看图像优化（它目前采用的格式是什么？您可以发布精灵吗？）

基本上这是一种权衡。如果您在页面上使用精灵中的1/2图像，那很好，因为通过较少的HTTP连接可以获得更多的收益，那么您就会浪费未使用的图像。如果你在精灵中使用了1％的图像，那就不值得了。

就你的第二个问题而言 - 绝对是 如果 ，精灵需要与当前一样大。由于加载了一个额外的小图像，您将看到很少的损失。例如，精灵点是将HTTP连接从100-> 10减少。 10-> 11并不是什么大问题。

Answer 2

如果你的精灵很大，我会建议将你的图像分成逻辑组并将它们保存为几个精灵（想想2-4）。如果并非所有分割精灵都在页面上同时显示，则页面加载会增加。