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

HTML,CSSについて教えてください。

9月のカレンダーが表組み(テーブル)されているとして、1日に1つのセルが割り当てられています。
この1つのセルに対して、当日の画像ファイル(晴れとか雨とか)を1個読み込むとします。そうすると、1つのカレンダーに対して30回画像が読み込まれることになります。また、セル内には画像ファイルに加えて数値も一緒に入れ込みたいです。

仮にこのカレンダーを1画面に30個表示したい場合、900回画像が読み込まれることになり、処理がすごく遅くなってしまいます。ここで、カレンダーと数値を別テーブルに切り分けてテーブルを重ねることが出来れば、カレンダーテーブル1個+数値テーブル30個になり、画像の読み込みが30回で済むような気がします。

イメージとしては数値が入ったテーブルのレイヤーの下に、天気画像を読み込んだカレンダーのレイヤーを入れる感じなのですが、このようなことは可能でしょうか?画像だけを読み込んだテーブルを先に作っておいて、ループで数値テーブルの背景にに入れ込むような感じです。

何か参考になる情報やヒントをいただけると助かります。


●質問者: southgate_01
●カテゴリ:インターネット ウェブ制作
✍キーワード:9月 CSS HTML イメージ カレンダー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● azuco1975
●10ポイント

900個の画像のうち、種類が数種類なら、

キャッシュがきくので、実際には900個読み込まないと思いますよ。

◎質問者からの返答

コメントありがとうございます。

私の知識不足と説明が難しいことで、うまくニュアンスが伝わらなくて申し訳ないです。


Perlでコードを書いているのですが、次のような感じになります。


my $html = getTable();

print ( $html );


getTable()の中で"<img'>というのを"30回*30日=900回結合しています。

これをprint( $html )とやると画面が表示されるのにすごく時間が掛かります。

print($html)を消すとすぐに表示される(他の部分が)ので、getTable()のループの中が遅いのではないような気がしています。実際、どこが遅いのか分からないのですがこのような感じです。


2 ● avena
●100ポイント ベストアンサー

画像と数値の両方がセルに入ったテーブルを作る、ということでしたら、テーブルを別々に作る必要性もとくにないかと思います。

あと、遅く感じるのはレンダリングが遅いせいかもしれません。たとえば、セルのサイズを指定せずに大量に画像をドドドドドと流し込むと、物凄く重くなります。サーバ上での 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例)

table.calendar {
 (略)
}
table.calendar td.rainy {
 width:24px;
 height:24px;
 background-image:url(img/weather/rainy.png);
}
table.calendar td.cloudy {
 (以下略)

こんな感じで。

解決が難しそうでしたら、ソース or 実際に出したいテーブルのキャプチャも見せてください。

◎質問者からの返答

コメントありがとうございます。

まずはやってみて、後ほどコメントします。

追記:


avenaさんに教えていただいた方法でやりたいことが実現できました。

これまでやっていたタグの方法はいろいろ工夫してみたのですが、解決出来ませんでした。(結局原因不明)


あと、のクラス名を(weather_1)とやるのと(weather1)とやった場合、前者ではこれまで通り処理時間が遅かったです。こちらも原因不明なのですが、こんなことってあるんですかね?


遅い原因はよく分からないのですが、とりあえず問題を解決出来きました、ありがとうございました。


3 ● オーイェー
●50ポイント

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個前のアドバイスでとりあえず解決出来ました、コメントいただきありがとうございました。

関連質問


●質問をもっと探す●



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