• ベストアンサー
  • 困ってます

画像縮小プログラムが、最初に読み込んだ時(再読み込みしない場合)動きません。

  • 質問No.3779643
  • 閲覧数174
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 50% (1/2)

今javascriptを使って、縦横比を固定したまま画像を縮小するプログラムを作っています。
ソースコードは
function keep_max() {
for (i in document.images)
{
if (document.images[i].className == 'small_sale_thumb')
{
max_width = 100 ;
max_height = 110 ;
}else
{
continue;
}

if ( document.images[i].height > max_height)
{
now_width = document.images[i].width;
now_height = document.images[i].height;
factor = max_height/now_height;
document.images[i].height = max_height ;
document.images[i].width = now_width * factor;
}
}
}

それで、このようにして画像を表示しようとします。
<img width="100" class="small_sale_thumb" src="http://hogehoge.co.jp/bc11/u3785993.jpg" />
<script type='text/javascript'>
keep_max();
</script>

このようにして、他のドメインのサイト(楽天など)の画像を読み込み、
縮小して表示しようとしているのですが、最初に読み込んだ場合、このプログラムが作動しません。
しかも何故か、二回目に読み込んだ場合(同じページを再読み込みした場合等)作動します。

これはいったいどういうことでしょうか?

ちなみに今妥協策として、bodyのonloadタグにもこれを仕込んでいますが、この場合、画像表示から縮小までにタイムラグがあります。

このプログラムを上手く動かす方法or他のクライアントサイドでの縮小の仕方はありませんでしょうか??

ちなみに縮小したい画像の件数が多いので、負荷対策のためGD等のサーバーサイドでの縮小は考えないようにしています。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 66% (66/99)

ロード済確認が無い事、まはたロード時間に関する問題だと思います。

onloadを使わずにkeep_max()を実行させると、まだ読み込みが完了してない画像は document.images[i].heightの値が 0 や undefinedとなります。
従って if ( document.images[i].height > max_height) が falseになりますから、初回は目的の動作はしないケースがある。
2回目、リロードなどはキャッシュから読み込むので読み込みも速く、if ( document.images[i].height > max_height) が trueになる。
また、オンロードを待たずにエレメント操作を開始してるので、場合によってはdocument.images配列がどこまで完成してるのか?も怪しいケースもあり得ます。

onloadを使う場合にタイムラグがあるのは、onloadはドキュメントの文字だけでなく画像やiframe等のドキュメント内のエレメントのロードが全部完了して『ロード』になります。
全てが読み終わってからなので if ( document.images[i].height > max_height) は全てtrueになりますが、数の多い画像を全部読みこんでからですので時間がかかると言う事でしょう。


質問者さんの思う所のページ表示のスマートさがどこにあるかによって対処法は違うと思います。
画像タグには一旦ロード中画像を表示さておいて、JavaScript側で画像を読み込んでロードが完了してからIMGタグに充てると言う手などもありますよ。
或いはドキュメントのオンロードタイミングではなく、個々のIMGにonloadを付けて個別にサイズ調整関数を動かすなど。

理想とする形は?
お礼コメント
gurujowa

お礼率 50% (1/2)

IMGタグの全てにonloadでkeep_maxをいれると理想の形になりました。
理想の形は、あくまでjavascriptで処理していることをユーザーに気づかれないことです。
ありがとうございました。
投稿日時:2008/02/16 13:16
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ