バックグラウンドイメージは全体のイメージをロードしていますか、または可視部分だけをロードしていますか？

Question

javascriptとcssを使用している小さなアニメーションがあります。私は24フレームからなる1つのスプライトpngファイルを作成し、1フレームの高さと幅を持つdivにその画像を背景画像として配置しました。

アニメーションが開始されると、javascript関数はバックグラウンド位置の値を変更しているので、6ミリ秒ごとに次のフレームが表示されます。

アニメーションはスムーズですが、ローカルサーバー上のすべてをテストしていますので、イメージ全体または表示されている部分の背景イメージを読み込むことはできません。

イメージ全体がプリロードされているか、ブラウザによっては何らかの形で表示されているPNGの一部だけが読み込まれ、プリ​​ロードされません。そのような場合は、イメージを別の方法でプリロードします。

誰でも知っていますか？

Answer 1

最初は画像全体を読み込みます。

あなたのCSSはそのファイルのHTTP要求をしています。そしてあなたのCSSはこの画像の位置をスタイリングしています。

スプライトの利点の1つは、1つのHTTP要求が行われ、それが次に配置に応じて異なるグラフィックを表示するために使用されるということです。

この記事の詳細を読む

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

アイデアは、コンピュータがメモリにグラフィックをフェッチすることができ、そして は、その後だけだった、一度にその画像の一部を表示するということでした より新しい画像を連続的に取得する必要があります。