2

javascript と css を使用した小さなアニメーションがあります。24 フレームで構成されるスプライト png ファイルを 1 つ作成し、そのイメージを background-image として、1 フレームの高さと幅を持つ div に配置しました。

アニメーションが開始されると、javascript 関数が background-position の値を変更するため、6 ミリ秒ごとに次のフレームが表示されます。

アニメーションはスムーズですが、ローカル サーバーですべてをテストしているため、わかりません: background-image は画像全体をロードしているのか、それとも表示されている部分だけをロードしているのか?

私が言いたいのは、画像全体がプリロードされているのか、それとも一部のブラウザが何らかの形で表示されている png の一部だけをロードし、残りをプリロードしていないのかということです。その場合は、別の方法で画像をプリロードします。

誰もこれを知っていますか？

4

1 に答える 1

2

最初に画像全体をロードします。

CSS はそのファイルの HTTP リクエストを作成しており、CSS はこの画像の位置をスタイリングしています。

スプライトの利点の 1 つは、HTTP リクエストが 1 つだけ作成され、それが配置に応じて異なるグラフィックスを表示するために使用されることだと思います。

この記事の詳細を読む:

http://css-tricks.com/158-css-sprites/

アイデアは、コンピューターがグラフィックをメモリにフェッチし、一度にそのイメージの一部のみを表示できるというものでした。これは、新しいイメージを継続的にフェッチするよりも高速でした。

于 2011-08-12T10:29:34.010 に答える