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

<div class="map1"></div>などを設置し、外部のCSSのbackgroundから画象を読み込むようにし
同一の画象の読み込み速度を上げようとしてますが、
これ以上に、同一の画象を複数個読むので、良い方法はありますか??

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/09/20 22:41:31
  • 終了:2011/09/27 22:45:08

回答(4件)

id:a-kuma3 No.2

a-kuma3回答回数4488ベストアンサー獲得回数18572011/09/20 23:13:32

ポイント25pt

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

id:niwa-mikiho No.3

niwa-mikiho回答回数508ベストアンサー獲得回数382011/09/22 08:42:38

ポイント25pt

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


div.map1{

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

}


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

id:otchy210 No.4

Otchy回答回数8ベストアンサー獲得回数32011/09/22 14:41:59

ポイント25pt

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

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません