-1

プロジェクトでスプライトイメージを使用してHTTP呼び出しの数を減らしようとしています。したがって、構造は次のようになります。

<div class="parent">
  <div class="child-1">Content here</div>
  <div class="child-2">Content here</div>
</div>

<div class="outsider">
Content here
</div>

私は3つの画像を持つ1つのスプライトを持っています-それぞれが親の2つの子クラス用で、最後の1つは「outsider」クラス用です。

私はこのようなCSSを与えることを試みることができます：

.parent{
  background-image: url("../img/4-in-one-sprite.png");
}
.child-1{
  background-position: 0px -10px;
  width: 10px;
}
.child-2{
  background-position: 0px -20px;
  width: 10px;
}
.outsider{
  background-position: 0px -30px;
  width: 10px;
}

部外者は親に属していないので、その背景はわかりませんよね？したがって、次のように、クラス定義でも同じ背景画像を再指定する必要があります。

.outsider{
  background-image: url("../img/4-in-one-sprite.png");
  background-position: 0px -30px;
  width: 10px;
}

私の疑問は次のとおりです。

  1. ブラウザは部外者クラスに追加の画像リクエストを行いませんか？画像がキャッシュされておらず、そのページの最初の読み込みであると想像してください。

  2. それとも、ブラウザはどういうわけか同じリソースをインテリジェントに理解し、全部で1回だけ呼び出しを行うのでしょうか。

  3. 背景画像を提供する場合、ページのレンダリングのどの段階で、ブラウザはリソースを要求しますか？cssを解析している間ですか、それともdomにペイントしている間ですか？

  4. ここでスプライトを使用し、3番目の画像を個別に配置せずにhttp呼び出しを最小限に抑えるための最良の方法は何ですか？

4

2 に答える 2

1

background-position要素の にのみ適用されbackground-imageます。これは継承されるものではありません (background: noneカスケードを停止し、親、子、孫の要素と何度も同じ背景を持つことを停止するために、各子を追加する必要はありませんね? ）。

したがって、ここには 3 つの出現がありbackground-imageます。1 つは部外者用、1 つは child-1 用、もう 1 つは各 child-2 用です (後者にはタイプミスがあります)。そして、位置の値の 3 つの異なるペア。

ブラウザは一意のリソースごとに 1 回だけリクエストしますが、心配する必要はありませんが、CSS、JS、画像、遅延、非同期などのリソースの読み込みの順序は異なる場合があります。Err は実際には異なります。

スプライトを使用する最善の方法は、スプライトを使用しない場合を知ることです。属性を持つ HTML 画像を使用する必要がある場合は使用しないでaltください。

最後に、1 つの重要なプロパティが不足しています: background-repeat. 繰り返しのスプライトはありません (一度にすべてのスプライトが表示されます)。no-repeat、用repeat-yの3 つの異なるスプライトrepeat-xが必要です。

于 2013-03-05T19:44:25.443 に答える
0

これを行う非常に良い方法は、これらの要素にのみ「スプライト」という名前を使用することです..

そして、css で次のようなものを使用します。

[class^="sprite-"], [class*=" sprite-"] {
    background:transparent url("../img/4-in-one-sprite.png") no-repeat;
}

したがって、「.sprite-outsider」と「.sprite-child-1」はどちらも背景としてスプライトを取得し、それらの位置のみが必要です..

ie6 では動作しませんが、現在はどうですか? ;)

そして、はい、これによりブラウザはスマートです!

于 2013-03-05T19:39:23.950 に答える