网站加载Sprite Image两次

Question

我一直在努力加速我的网站，并且这样做我将我的一些图像组合成一个精灵文件。现在一切都很好，但是，当我运行网站时，无论是在本地还是在测试网站上，它都会加载精灵文件两次，而我无法为我的生活找出原因。我正在使用asp.net的masterpages，我只有一个css文件，不包括我的一些telerik控件使用的css文件，而且我没有篡改任何telerik css文件或sprite。您可以访问我们的测试网站：http://www.myheadpiece.com/test并查看。精灵文件的名称是ms1.png。我还可以在必要时提供其他代码/答案，我只是不确定在哪里/哪里看。如果有人有任何想法，请告诉我。谢谢。

Answer 1

检查精灵路径的情况，你有

http://www.myheadpiece.com/test/Images/Structure/ms1.png

和

http://www.myheadpiece.com/test/images/Structure/ms1.png

一个是资本“我”，另一个是小“i”。因此，在你的CSS中你应该使用“图像”或“图像”来引用精灵。

Answer 2

你的CSS应该是这样的：

.Sprite { background-image: url("../Images/Structure/ms1.png"); background-color: transparent; background-repeat: no-repeat; }

.HeaderLogo { background-position: 0 -768px; ... other styles ... }

.CartButton { background-position: -818px -754px; ... other styles ...}

HeaderLogo和CartButton都应该分配第二个css类（'Sprite'），所以你只为Sprite类加载一次图像，所有要使用它的元素只改变它的位置。