JavaScriptで複数個あるマップチップ（画象）を表示せるプログラムを作りましたが、

CSSスプライトなら読み込み速度は充分なのではないでしょうか。

• CSS Spriteを活用しよう | DesignWalker
• 背景画像に関する実用的なスタイルシートのテクニック集 | コリス

src 属性に同一の値 (画像の URL) を持つ、IMG タグをたくさん配置するよりも、

一つのスタイル指定で読み込ませる方が早いに違いない、という着想は正しいと思いますが、

実際に試してみると、同一の URL を指す IMG が複数あった場合には、

今どきのブラウザでは、ブラウザが一回のリクエストで取得しようとします。

Webサーバのアクセスログを見れば一発で分かるのですが、

<img src="a.png">
<img src="a.png">
<img src="a.png">

という HTML でも、Webブラウザに a.png を取りに行くのは一回だけです。

これは、IMG 要素を javascript で動的に生成しても同じです。

これ以上に、同一の画象を複数個読むので、良い方法はありますか？？

例えば、32x32 の画像を 10種類読む場合、その 10種類をタイル状に並べた、

320x32 の画像を作成して、スタイルで clip で画像の一部を切り出して表示する、という手法があります。

a.png と b.png が 32x32 のサイズの画像だとして、

<img src="a.png">
<img src="b.png">

というところを、a.png と b.png を横に並べた、二倍の大きさの画像 ab.png を作っておいて、

<img src="ab.png" style="clip:rect(0px,32px,32px,0px)">
<img src="ab.png" style="clip:rect(0px,64px,32px,32px)">

とすると、一回の読み込みで済むようになります。

https://developer.mozilla.org/en/CSS/clip

チップとして表示する画像を全て１枚の画像にまとめ、

div.map1{

background: url("～") no-repeat 100px 50px;

}

といった様にして表示します。

回答者の方達が言う CSS スプライトを実際のソースで書くとこんな感じになりますね。

http://jsdo.it/Otchy/css-sprite-mapchip