JavaScriptで複数個あるﾏｯﾌﾟﾁｯﾌﾟ(画象)を表示せるﾌﾟﾛｸﾞﾗﾑを作りましたが､CSSｽﾌﾟﾗｲﾄなら読み込み速度は充分なのではないでしょうか｡
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)">
とすると､一回の読み込みで済むようになります｡
ﾁｯﾌﾟとして表示する画像を全て1枚の画像にまとめ､
div.map1{
background: url("?") no-repeat 100px 50px;
}
といった様にして表示します｡
回答者の方達が言う CSS ｽﾌﾟﾗｲﾄを実際のｿｰｽで書くとこんな感じになりますね｡
