人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptで複数個あるマップチップ(画象)を表示せるプログラムを作りましたが、
<div class="map1"></div>などを設置し、外部のCSSのbackgroundから画象を読み込むようにし
同一の画象の読み込み速度を上げようとしてますが、
これ以上に、同一の画象を複数個読むので、良い方法はありますか??


●質問者: makocan
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Cherenkov
●25ポイント

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


2 ● a-kuma3
●25ポイント

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


3 ● niwa-mikiho
●25ポイント

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


div.map1{

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

}


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


4 ● Otchy
●25ポイント

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

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ