9月のカレンダーが表組み(テーブル)されているとして、1日に1つのセルが割り当てられています。
この1つのセルに対して、当日の画像ファイル(晴れとか雨とか)を1個読み込むとします。そうすると、1つのカレンダーに対して30回画像が読み込まれることになります。また、セル内には画像ファイルに加えて数値も一緒に入れ込みたいです。
仮にこのカレンダーを1画面に30個表示したい場合、900回画像が読み込まれることになり、処理がすごく遅くなってしまいます。ここで、カレンダーと数値を別テーブルに切り分けてテーブルを重ねることが出来れば、カレンダーテーブル1個+数値テーブル30個になり、画像の読み込みが30回で済むような気がします。
イメージとしては数値が入ったテーブルのレイヤーの下に、天気画像を読み込んだカレンダーのレイヤーを入れる感じなのですが、このようなことは可能でしょうか?画像だけを読み込んだテーブルを先に作っておいて、ループで数値テーブルの背景にに入れ込むような感じです。
何か参考になる情報やヒントをいただけると助かります。
No.2
48
7
100pt
画像と数値の両方がセルに入ったテーブルを作る、ということでしたら、テーブルを別々に作る必要性もとくにないかと思います。
あと、遅く感じるのはレンダリングが遅いせいかもしれません。たとえば、セルのサイズを指定せずに大量に画像をドドドドドと流し込むと、物凄く重くなります。サーバ上での HTML 出力に純粋にかかっている時間を計測し、ブラウザ上での描画が重いのか出力が重いのか比較してみるとよいかも。
対策の一例として、CSS でセルの背景としてお天気の画像を読み込ませてはいかがでしょう。
(HTML例)
<table class="calendar">
<tr>
<td class="rainy">1</td>
<td class="fine">2</td>
<td class="cloudy">3</td>
<td class="cloudy">4</td>
…
(CSS例)
61
61
table.calendar {
(略)
}
table.calendar td.rainy {
width:24px;
height:24px;
background-image:url(img/weather/rainy.png);
}
table.calendar td.cloudy {
(以下略)
こんな感じで。
解決が難しそうでしたら、ソース or 実際に出したいテーブルのキャプチャも見せてください。
コメントありがとうございます。
まずはやってみて、後ほどコメントします。
追記:
avenaさんに教えていただいた方法でやりたいことが実現できました。
これまでやっていた![]()
タグの方法はいろいろ工夫してみたのですが、解決出来ませんでした。(結局原因不明)
あと、
遅い原因はよく分からないのですが、とりあえず問題を解決出来きました、ありがとうございました。
2009/09/11 14:09:35その他の回答（2件）
azuco1975
613
16
900個の画像のうち、種類が数種類なら、
キャッシュがきくので、実際には900個読み込まないと思いますよ。
コメントありがとうございます。
私の知識不足と説明が難しいことで、うまくニュアンスが伝わらなくて申し訳ないです。
Perlでコードを書いているのですが、次のような感じになります。
my $html = getTable();
print ( $html );
getTable()の中で"<img'>というのを"30回*30日=900回結合しています。
これをprint( $html )とやると画面が表示されるのにすごく時間が掛かります。
print($html)を消すとすぐに表示される(他の部分が)ので、getTable()のループの中が遅いのではないような気がしています。実際、どこが遅いのか分からないのですがこのような感じです。
avena
48
7
ここでベストアンサー
画像と数値の両方がセルに入ったテーブルを作る、ということでしたら、テーブルを別々に作る必要性もとくにないかと思います。
あと、遅く感じるのはレンダリングが遅いせいかもしれません。たとえば、セルのサイズを指定せずに大量に画像をドドドドドと流し込むと、物凄く重くなります。サーバ上での HTML 出力に純粋にかかっている時間を計測し、ブラウザ上での描画が重いのか出力が重いのか比較してみるとよいかも。
対策の一例として、CSS でセルの背景としてお天気の画像を読み込ませてはいかがでしょう。
(HTML例)
(CSS例)
table.calendar { (略) } table.calendar td.rainy { width:24px; height:24px; background-image:url(img/weather/rainy.png); } table.calendar td.cloudy { (以下略)こんな感じで。
解決が難しそうでしたら、ソース or 実際に出したいテーブルのキャプチャも見せてください。
コメントありがとうございます。
まずはやってみて、後ほどコメントします。
追記:
avenaさんに教えていただいた方法でやりたいことが実現できました。
これまでやっていた![]()
タグの方法はいろいろ工夫してみたのですが、解決出来ませんでした。(結局原因不明)
あと、
遅い原因はよく分からないのですが、とりあえず問題を解決出来きました、ありがとうございました。
2009/09/11 14:09:35オーイェー
81
14
CSSスプライトというテクニックを使えば、画像の読み込み1回で済みます。
天気の画像をimgタグで書かれているとのことですので、
それをCSSのbackground-imageとして表示するように変更すれば利用可能かと思います。
http://gihyo.jp/design/serial/01/ss-design/0010
http://www.designwalker.com/2008/02/css-sprite.html
コメントありがとうございます。
まずはやってみて、後ほどコメントします。
追記:
こちらはちょっと難しそうなのでやっていません、申し訳ありません。
1個前のアドバイスでとりあえず解決出来ました、コメントいただきありがとうございました。
コメント（2件)
32 x 32 px の gif 500 個ほどをテーブルで区切った中に表示 (サーバーから読み出して) させても、
そんなに目に見える程は遅くならないと思うのですが…？
> getTable()のループの中が遅いのではないような気がしています。
私も恐らくこれは無いと思います。
Perl の文字列結合の速度は非常に速いです。900 回程度はなんという事はありません。
(一行が万単位の文字数で、これを 900 回結合するとかいうのであれば別ですが)
この質問への反応（ブックマークコメント）
これ以上回答リクエストを送信することはできません。制限について