7

この質問は少しばかげているように聞こえるかもしれませんが、誰かが賢明なアイデアを思いつくかもしれないと強く思います。

1 つの HTML ページに 1000 個のサムネイル画像があるとします。

画像のサイズは約 5 ～ 10 kb です。

1 回のリクエストですべての画像を読み込む方法はありますか? どういうわけか、すべての画像を 1 つのファイルに圧縮します…</p>

または、この件に関して他に提案はありますか？

私がすでに知っている他のオプション：

CSS スプライト

遅延ロード

Expire ヘッダーを設定する

異なるホスト名でイメージをダウンロードします

4

4 に答える 4

6

あなたの状況を考えると、私が考えることができる他のオプションは2つだけです。

  1. "data:" プロトコルを使用して、サムネイルの base64 エンコード バージョンを HTML ページに直接エコーします。これらの画像をユーザーのブラウザーにキャッシュすることはできないため、これはお勧めしません。
  2. HTML5 の Web Storage を使用して、すべての画像をレコードとして保存し、base64 でエンコードされた画像データを BLOB として列に保存します。データベースがユーザーのマシンにダウンロードされたら、Javascript を使用してすべてのレコードをループ処理し、jQuery などを使用して動的にページにサムネイルを作成します。このオプションを使用すると、エンド ユーザーのブラウザーでデータベース全体のダウンロードが完了するまで待つ必要があり、かなり最新のブラウザーが必要になります。

あなたの最善の策は、遅延読み込み、期限切れヘッダーによるキャッシュ、および複数のホスト名からの画像の提供の組み合わせだと思います。

画像を論理的にグループ化できる場合は、上記のすべてに加えて、CSS スプライトも機能する可能性があります。たとえば、サムネイルが特定の日にアップロードされた画像の場合、1 日ごとに 1 つのファイルを作成し、ユーザーのブラウザにキャッシュすることができます。

于 2010-12-28T05:09:55.630 に答える
2

これは、CSS スプライトと呼ばれるものを使用して行われます。css によって選択された html で必要な特定の部分を含む、他のすべての画像を含む単一の画像。

http://css-tricks.com/css-spritesで 1 つのチュートリアルを参照してください。

于 2010-12-28T05:13:40.523 に答える
0

imagemagick のmontageコマンドを試して、単一の画像を作成できます。

于 2010-12-28T05:07:27.480 に答える
0

SPDY のserver pushのようなものが必要なようです。クライアントが HTML ページ (または最初の画像) を要求すると、SPDY はサーバーがそれ以上の要求を待たずに他のリソースをプッシュできるようにします。

もちろん、これはまだ実験的なものです。

于 2010-12-28T05:00:28.533 に答える