从html而不是css预加载sprite图像会更快吗？

Question

在我看来，如果对我的Sprite图片的唯一引用是在CSS中，则这两个文件不能并行下载。 首先，它必须下载css文件，然后知道它需要sprites文件，并且可以开始下载sprites。 包括一个引用精灵图像的内联CSS会更快些，以便两者并行获取吗？

Answer 1

如果您的精灵是通过javascript使用的，则可以使用javascript以这种方式加载您的精灵，从而确保在真正加载之前，精灵无法进行任何操作。

如果您正在使用css3来使用sprite，请使用css或html。

用html表示您可以将图像包含在实际的html文件中，其宽度和高度为1px。 这样可以确保同时加载图像。

就性能而言，它并不会真正带来明显的改变。 尽管使用css3可以确保您网站的所有用户都具有相同的体验，但是使用javascript仅在打开javascript时才能受益。

Answer 2

在工作中的项目中，我们遇到了同样的问题，一个不太好的解决方案是在打开body标签之后添加带有sprite作为src的img标签。

Answer 3

如果您的精灵足够小，则还可以使用data URI （CSS-Tricks上的数据URI） ，但随后您将不得不为background-image使用一个选择器，为background-image-position其他选择器，因此您不必在每个选择器上都包含data URI 。