1

データベースに保存されている画像を表示するために使用しているASHXハンドラーがあります。画像をサムネイルとして表示し、ユーザーが画像の上にマウスを置くとフルサイズで表示します。

実行時に画像を組み合わせて、この状況で使用するCSSスプライトを作成するにはどうすればよいですか？

それができるなら、どこから始めるべきかについて誰かが提案を持っていますか？

UPATE

ほとんどの人が、これはスプライトを使用するのに適した状況ではないと言っているようです。私はスプライトの概念に慣れていないので、我慢してください。

データベースから1ページに30枚のサムネイルを毎回読み込む場合、30枚の個別の画像を渡すのではなく、サーバーからクライアントに1つの大きな画像として渡すのが意味がないのはなぜですか。これはもっと速いのではないでしょうか？これがCSSスプライトの目的ではありませんか？

4

5 に答える 5

2

ブラウザに関する限り、HTTPリソースはHTTPリソースであり、サーバーがハードディスクからファイルを読み取ったり、データベースからデータを取り出したり、乱数ジェネレータのコンテンツを吐き出したりして生成したかどうかは関係ありません。有効なPNGデータを出力するアルゴリズム。

通常どおり、データから画像を生成する必要があります。

とはいえ、画像はコンテンツであるため、CSSはそれらをドキュメントに含めるには不適切なツールになります。<img>要素を使用する必要があります。

于 2010-07-13T22:57:39.060 に答える
1

http://www.RequestReduce.comをチェックしてください。スプライト ファイルを自動的に作成するだけでなく、すべての CSS をマージおよび縮小するとともに、HttpModule を介してオンザフライで作成します。また、量子化とロスレス圧縮を使用してスプライト画像を最適化し、ETags ヘッダーと Expires ヘッダーを使用して生成されたファイルの提供を処理し、最適なブラウザー キャッシュを確保します。セットアップは簡単で、web.config を変更するだけです。Microsoft Visual Studio および MSDN サンプル ギャラリーでの採用については、私のブログ投稿を参照してください。

于 2011-09-11T07:12:20.120 に答える
1

いくつかのオプションがあります。

  1. ハンドラーは、データベースから取得した画像をオンザフライで結合し、すべてをブラウザーに送信できます。

または（そして、私はこれが好きです）

  1. 画像がサイトにアップロードされるときに、マージされた画像を作成します。

2 番目の方法は、変換が 1 回だけで済むため、それらのリソースを 1 回だけ使用する必要があるため、より優れています。これは、基本的にイメージの 2 つのコピーを保存していることを意味しますが、それで問題ありません。

アップデート

私はあなたがやろうとしていることを誤解したと思います。サムネイルと本格的な画像を組み合わせようとしていると思いました。代わりに、すべてのサムネイル画像を組み合わせる方法を実際に尋ねているようです。

その場合、それはさらに悪い考えです。David Dorward が述べたように、CSS はレイアウトの制御に使用されます。あなたはコンテンツについて話している。ただし、セマンティックの問題はさておき、レイアウトを微調整したい場合は、最初にスプライトを作成するコードを変更する必要があります。35 枚の画像を作成することにした場合はどうなりますか? または、それを 18 に変更しますか?

スプライトルートに行くことで、スタイルが良くないレイアウト変更のためにコードを変更することを余儀なくされて、かなりうまくいきません。

最後の質問をカバーするには: もっと速くなりませんか? おそらくそうではありません。このシナリオでは、スプライトをオンザフライで作成する必要があり、これによりサーバーのオーバーヘッドが発生し、すべてが遅くなります。せいぜい配達時間内の洗濯かもしれません。最悪の場合、大規模なサーバーと開発パフォーマンスへの悪影響が発生します。

于 2010-07-13T23:06:54.363 に答える
0

私はデイビッドに完全に同意します。David の最後のポイントに関する簡単なメモ: それは画像がコンテンツである場合のみです。ただし、それらがレイアウトの一部である場合は、CSS が適切です。

とはいえ、このユース ケースでは、スプライトは適切な選択ではありません。サムネイルの目的の 1 つは読み込み時間を短縮することですが、スプライトを使用するとギャラリーの読み込み時間が短縮されます。より良いパターンは、ライトボックスなどを使用して、1 つではなく 2 つの画像を使用し、必要に応じて大きい方の画像を要求することです。

于 2010-07-13T23:04:15.813 に答える
0

ここでは、スプライトは適切なソリューションではありません。

あなたの更新に答えるために、スプライトは多くの小さな画像に最適です。新しい HTTP リクエストのオーバーヘッドは、小さな png や gif (16x16 アイコンなど) のために送信される数バイトを上回ります。大きな画像の場合、ダウンロード時間が長くなるにつれて、HTTP 要求の時間は全体的にそれほど重要ではなくなります。

画像をスプライトにパッキングするということは、スプライトが 1 つの長いリクエストを実行し、他のリクエストがその背後でキューに入れられる必要があることも意味します。サムネイルをすばやく表示することが重要な場合は、同じ画像の大きなビューの読み込みを開始する前に、それらが最初に読み込まれることを確認してください。

最初のページ読み込み時に表示されない大きなファイルは、遅延読み込み (window.onload) または遅延読み込み (必要に応じてクリックまたはホバー アクションで) する必要があります。

于 2010-07-14T00:12:39.737 に答える