Javascriptゲームのカード画像を表示する最も効率的な方法

Question

Javascriptゲーム用のカード画像がある場合、その画像を表示する最も効率的な方法は何ですか？
同じ画像URLで新しいオブジェクトを作成するだけですか？
すべての画像をプリロードして非表示にし、画像オブジェクトのインスタンスを複製する必要がありますか？
別の方法がありますか？

Answer 1

• もちろんあらかじめロードしてください。
• できるだけスプライトを使用します。たとえば、各スーツを1つの画像に読み込むことができます。次に、各カードをdivの背景として読み込むことができます。
• 同じURLから画像を読み込む限りです。ブラウザーは、サーバーから要求するのではなく、クライアントのローカルにキャッシュされたファイルを使用する必要があります。
• クローニングは良いはずですが、それは深いクローンでなければなりません。そうしないと、他のすべてのクローンに影響します。

Answer 2

私が行うオプションは、CSS Spritingと呼ばれています。基本的には、すべての画像を1つの大きな画像に結合してから、CSSを使用してwidthとleftの属性を設定して、必要な画像だけを表示します。利点は、すべての画像がその1つの大きな画像から一度に読み込まれることです。

Answer 3

これを表示するには、一般的なimg要素の "src"属性を置き換える方がいいでしょう。 プリロードについては、おそらく良い考えです。イメージをプリロードするために必要な作業は、

var preloadImg = new Image(); 
preloadImg.src = "blah"; 

などです。これをキャッシュにロードするといいですよ。

Answer 4

これらをすべて事前にロードすることをお勧めします。最初に要求されても遅延なく、必要に応じて表示されます。それらがユーザー側にキャッシュされていることを確認します。

イメージにCSSスプライトを使用することを考えましたか？ 52種類のイメージのヘッダーを要求する必要がないので、おそらくこれも高速化します。 13枚のカードを1列に並べ、それぞれのスーツに4枚のカードを1枚ずつ入れて、カードごとにbackground-positionを調整すれば、一枚のカードがロードされるとすべてがロードされていることが保証されます。