从html而不是css预加载我的精灵图像会更快吗？

Question

在我看来，如果我的精灵图像的唯一引用是在css中，那么这两个文件不能并行下载。首先，它必须下载css文件，然后它会知道它需要sprite文件，它可以开始下载精灵。包含一个引用精灵图像的内联css是否会更快，以便可以并行获取这两个？

Answer 1

如果您的精灵使用javascript，那么使用javascript加载您的精灵，这样您就可以确保在实际加载精灵之前无法完成任何操作。

如果您使用css3来使用精灵，那么请使用css或html。

通过html我的意思是你可以将图像包含在实际的html文件中，宽度和高度为1px。这样可以确保加载图像。

就性能而言，它不会产生显着的差异。虽然使用css3可以确保您网站的所有用户都具有相同的体验，而使用javascript只会在javascript打开时获得好处。

Answer 2

我们在工作中的项目中遇到了同样的问题，一个不那么漂亮的解决方案就是在开场img之后添加一个src标记，精灵作为body标签。

Answer 3

如果您的精灵足够小，您也可以使用data URI (data URIs on CSS-Tricks)，但是您必须为background-image使用一个选择器，并为{{1}使用其他选择器因此，您不必在每个选择器上都包含background-image-position。