約70枚の画像を含むWebページがあります。これらの画像をリソース ファイルにバンドルする方法を探しています。これは、キャッシングなどがこれを処理するため、クライアント側のパフォーマンスを向上させるものではありません。これは、cms を介したサーバー側での資産管理のためのものです。70 個の個別のリソースを作成するのではなく、単一のリソースを cms にデプロイできるようにしたいと考えています。
画像をバンドルできる JavaScript ライブラリはありますか?
質問する
2213 次
2 に答える
4
これはイメージ スプライトを使用して簡単に行うことができ、JavaScript を使用する必要はありません。スプライトは、特定の場所に配置された画像のコレクションを含む単一の画像ファイルです。画像には透明なPNG画像を使用することをお勧めします。
以下に、Google、Windows Live、および Facebook で使用される透明な PNG スプライトを示します。
スプライトが Web ページに読み込まれると、ブラウザは通常、ページの読み込み速度を向上させるために画像をキャッシュするため、別のページに画像を表示するのは簡単です。次のように、CSS を使用してスプライト内の特定の位置を定義することにより、スプライト内に特定の画像を表示できます。
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
最後に、Spriteboxは、独自のカスタム イメージ スプライトを作成するための便利なツールです。
于 2012-08-09T05:34:55.873 に答える
3
必要なのはCSSスプライトだと思います。CSS スプライトを使用すると、1 つの画像に複数の画像を含めることができ、その画像を使用して個々の画像を要件として表示できます。
これの主な利点は、画像ごとにリクエストするのではなく、この画像に対して単一のリクエストが必要になることです。
CSS スプライトの詳細については、以下のリンクを確認してください http://www.w3schools.com/css/css_image_sprites.asp
于 2012-08-09T05:12:11.100 に答える