サイトの読み込みスプライトイメージを2回

Question

私は自分のウェブサイトをスピードアップしようとしていました。そのために私はいくつかのイメージをスプライトファイルに結合しました。しかし、サイトがローカルでもテストサイトでも、スプライトファイルを2回ロードすると、すべてのことがうまくいきます。なぜなら、私の人生にとって理由は分かりません。私はasp.netでmasterpagesを使用しています。私は、自分のtelerikコントロールが使用するcssファイルを含めて1つのcssファイルしか持っていません。私はtelerik cssファイルやスプライトを改ざんしていません。テストサイト（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クラスのために一度だけの画像をロードして、すべての要素を割り当てる必要がありますそれを使用するつもりは、位置だけを変更します。