0

多数の画像 (アニメーション フレーム) を指定して、それらをプリフェッチし、必要に応じて Web ページに表示したいと考えています。

気の利いた pluginを含む、プリフェッチのいくつかの方法を試しましたが、これは非常に単純な方法です。

<div class="animation-container"></div>

<div class="holding-container" style="display:none"></div>

<script>
$('.holding-container').append('<img src="Image1.png" />');
$('.holding-container').append('<img src="Image2.png" />');
</script>

Firebug または開発者ツールの [ネットワーク] タブで、これらの呼び出しがサーバーへのクエリになり、画像が正常に取得されていることがわかります。

では実際に画像を使ってみたいと思います。非常に単純化されたコードを次に示します。

$('.animation-container').prepend('<img src="Image1.png"/>');

これは、物事が軌道から外れる場所です。ネットワーク タブは、ブラウザーがサーバーに再度クエリを実行することを示しています(304 NOT MODIFIED を受け取ります)。これにより、画像が表示されるまでに約 200 ミリ秒の遅延が発生します。なぜこれが起こるのですか?どうすればよいですか?

4

3 に答える 3

2

CSSスプライトが役立つかもしれません。これらはアニメーションに最適で、十分な画像編集スキルがない場合は、無料のオンライン ジェネレーターがたくさんあります。

于 2012-10-21T05:05:53.707 に答える
0

画像をプリロードする方法は2つあります。

イベントをサポートする画像プリローダーJavaScript

画像をユーザーのキャッシュに非同期でロードする方法はありますか？

どちらの場合も、これらは画像をキャッシュされた画像にプリロードします。次に、これらの画像URLをWebページの他の場所で使用すると、すぐに（ブラウザのキャッシュから）読み込まれます。

于 2012-10-21T04:14:14.253 に答える