0

Wordpressテーマ内に表示されるアニメーションで使用される約300の画像を参照するJSONファイルがあります。私のheader.phpでは、次のjQueryを使用して、DOMロード時にすべての画像をプリロードしています。

function preload(images) {
  jQuery(images).each(function () {
    jQuery('<img />').attr('src',this).appendTo('body').css('display','none');
  });
}

jQuery(document).ready(function() {
  preload([
     "<?php bloginfo('template_directory'); ?>/library/images/img001.jpg",
     "<?php bloginfo('template_directory'); ?>/library/images/img002.jpg",
          //about 300 more...
  ]);
});

問題は、画像が900x400pxであるため、300のHTTPリクエストすべてが通過するのに約30秒かかることです。1つのHTTPリクエストだけで画像を読み込むと、読み込み時間を短縮できると思います。これは可能ですか？前もって感謝します。

4

3 に答える 3

3

はい、スプライトを使用することは可能です(いいえ、ソーダではありません)。これは、画像が 1 つの大きな画像に詰め込まれている場合です。

PHP の GD ライブラリをチェックアウトして、コンパイル済みのイメージを生成できます。もちろん、すべてのリクエストではなく、事前に一度コンパイルしてください。そうしないと、サーバーが強制終了されます。

極端に言うと、画像を base64 string として送信できます。そうすれば、サーバー上で文字列を圧縮し、クライアント上でLZW のようなアルゴリズムを使用して解凍することができます。それに加えて、transport に GZIP を適用できます。

クライアント側では、画像を 1 つの大きな画像として受け取ります。これらを base64 でエンコードした場合は、data URI スキームを使用して、base64 文字列を使用して画像を表示できます。

結局のところ、スプライト技術を使用して画像をアニメーション化し、フレームごとに画像を移動できます。

その他のヒント:

  • Adobe Fireworks などを使用して画像を圧縮します。

    • 使用していない色を削除
    • 容認できる程度まで品質を下げる
    • JPG などの軽量形式を使用する

  • アニメーションをセクションに分割します。この手法は、アニメーションがフレームごとではなくパーツに分割されたGoogle の母の日の Doodleで使用されました。

于 2012-05-26T10:52:29.743 に答える
1

単一の HTTP リクエストを実行するには、ファイルを base64_encode して、たとえば json_encoded リストとして送信する必要があります。クライアント側では、次のようにします。

jQuery.get('json_list_of_images.php', function(list) {
    for(i in list) {
        $('<img />').attr('src', list[i])
    }
});

これにより、データ量が 33% 増加し、表示する画像がメモリに完全に読み込まれることも意味します。つまり、300*900*400*1.33*4 = 0.535100698GB です。

于 2012-05-26T10:48:05.073 に答える
0

30 秒かかるのは、300 個の画像を読み込もうとしているためです。いくら最適化しても、それがかなり高速なタスクになることはありません。プロセスを再考する必要があります。たとえば、次のことができます。

  1. 最初の画像を読み込んで表示する
  2. 最初の画像が表示されている間に 2 番目の画像の読み込みを開始します
  3. 2 番目の画像を表示し、残りの画像について手順 2 を繰り返します。

このような 300 個の大きな画像を一度に読み込む必要はまったくありません。

于 2012-05-26T10:42:09.390 に答える