onloadの同一ページ内の干渉対策

2010/03/04 11:00

このQ&Aのポイント

CGIで呼び出した、任意の大きさの画像データを、フレーム内に収めるためのサイズ調整関数をHTML内に置きましたが、onLoad同士が干渉し合ってしまい、最初の画像が表示されません。
複数のフレームの大きさに対応するため、複数のonloadイベントを設定しましたが、これにより干渉が生じ、表示に問題が生じます。
ブラウザの更新ボタンを押すと、関数処理後の画像が表示されるため、関数自体には問題がないと考えられます。解決策をお持ちの方、ご教授ください。

juniper_se
お礼率44% (11/25)

JavaScript
回答数6
ありがとう数7

みんなの回答 （6）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/03/04 19:58 回答No.6

#4です。少々まわりくどいですが、思いついたので… *クラスに「fit」を指定してあるdiv要素の最初のimageが対象としてdiv 　にフィットします。 *divにはあらかじめサイズを設定しておいてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> .size1 { width:200px; height:100px; } .size2 { width:400px; height:100px; } .size3 { width:100px; height:300px; } </style> <script type="text/javascript"></script> </head> <body> <div class="size1 fit"><img src="A.jpg"></div> <hr> <div class="size2 fit"><img src="B.jpg"></div> <hr> <div class="size3 fit"><img src="C.jpg"></div> </body> </html>

質問者

補足 2010/03/05 10:04

fujillin様この件に関しまして、再び御付合い頂き、有難うございました。サーバ上で動作確認ができました。内容に関して、自分の理解の及ばないところもありますが、今後調べて、理解を深めていきたいと思います。重ねて、お礼を申し上げます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (5)

t_netbug
ベストアンサー率34% (15/44)

2010/03/04 13:23 回答No.5

imgタグに付けているonloadを代わりにclass名へ変更し、bodyタグにonloadイベントをくっつけて、bodyのonload内でクラス名によってwidth,heightの幅を振り分けるようにしたらいかがでしょうか？

質問者

補足 2010/03/04 19:41

以下のようにしてみたのですが、うまくいかないようです。ご指摘、お願いします。 <HEAD> <script type="text/javascript"> function resize1(e) { getElementsByClassName('a'); var size = { width:100, height:100}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } function resize2(e) { getElementsByClassName('b'); var size = { width:100, height:200}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } function resize3(e) { getElementsByClassName('c'); var size = { width:100, height:300}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } </script> </HEAD> <BODY onload="resize1();resize1();resize2();resize3()"> <img src="" class="a"> <img src="" class="b"> <img src="" class="c"> </BODY>

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2010/03/04 13:11 回答No.4

＞imgタグ内の指定では、アップされた画像と設定の縦横比が大きく変わってそのために、枠のサイズににフィットさせる方法を質問していたのではないの？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> .size1 { width:200px; height:100px; } .size2 { width:400px; height:100px; } .size3 { width:100px; height:300px; } </style> <script type="text/javascript"></script> </head> <body> <div class="size1"> <img src="A.jpg" onload="fit(this)"> </div> <hr> <div class="size2"> <img src="B.jpg" onload="fit(this)"> </div> <hr> <div class="size3"> <img src="C.jpg" onload="fit(this)"> </div> </body> </html> いちいちonloadを書かなくても良い方法がないものか探してみたけれど、ちょっとわからなかった…

ログインすると、全ての回答が全文表示されます。

imq
ベストアンサー率72% (16/22)

2010/03/04 12:56 回答No.3

すみませんが、質問文にある情報だけでは干渉する原因を見つけることは出来ないです。 resize１～resize4の内容を教えてください。基本的にはthisを渡した引数を使えば問題無いはずです。 ↓は等比変形ではないですが、 var resize = function( elem ) { elem.width = 100; // 引数で渡された要素に幅指定 elem.height = 100; // 引数で渡された要素に高さ指定 }; ちなみに、JavaScriptを使わなくても widthかheightのどちらかを指定すれば同一の縦横比で表示してくれます。

ログインすると、全ての回答が全文表示されます。