- ベストアンサー
onloadの同一ページ内の干渉対策
- CGIで呼び出した、任意の大きさの画像データを、フレーム内に収めるためのサイズ調整関数をHTML内に置きましたが、onLoad同士が干渉し合ってしまい、最初の画像が表示されません。
- 複数のフレームの大きさに対応するため、複数のonloadイベントを設定しましたが、これにより干渉が生じ、表示に問題が生じます。
- ブラウザの更新ボタンを押すと、関数処理後の画像が表示されるため、関数自体には問題がないと考えられます。解決策をお持ちの方、ご教授ください。
- juniper_se
- お礼率44% (11/25)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （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"><!-- window.onload = function() { //alert('OK?'); var i, e, n, img = []; var d = document.getElementsByTagName('DIV'); for (i=0; i<d.length; i++) { if (/(^f|\bf)i(t\b|t$)/.test(d[i].className)) { if (e = d[i].getElementsByTagName('IMG')[0]) { n = img.length, img[n] = new Image(); img[n].onload = imageFit(d[i], e, n); img[n].src = e.src; } } } function imageFit(d, e, n) { return function() { var w = getStyle(d, 'width'); var h = getStyle(d, 'height'); if (isNaN(w) || isNaN(h)) return; var t = img[n]; w /= t.width, h /= t.height; e.width *= w>h?h:w; img[n] = null; } } function getStyle(e, a) { return parseInt(e.currentStyle?e.currentStyle[a]:document.defaultView.getComputedStyle(e, null).getPropertyValue(a)); } } --></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>
その他の回答 (5)
- t_netbug
- ベストアンサー率34% (15/44)
imgタグに付けているonloadを代わりにclass名へ変更し、bodyタグにonloadイベントをくっつけて、bodyのonload内でクラス名によってwidth,heightの幅を振り分けるようにしたらいかがでしょうか？
補足
以下のようにしてみたのですが、 うまくいかないようです。 ご指摘、お願いします。 <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)
＞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"><!-- function fit(elm) { var p = elm.parentNode, w, h; w = parseInt(getStyle('width')); h = parseInt(getStyle('height')); w = w/elm.width, h = h/elm.height; if (isNaN(w) || isNaN(h)) return; elm.width *= w>h?h:w; function getStyle(a) { return p.currentStyle?p.currentStyle[a]:document.defaultView.getComputedStyle(p, null).getPropertyValue(a); } } --></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)
すみませんが、質問文にある情報だけでは干渉する原因を見つけることは出来ないです。 resize１～resize4の内容を教えてください。 基本的にはthisを渡した引数を使えば問題無いはずです。 ↓は等比変形ではないですが、 var resize = function( elem ) { elem.width = 100; // 引数で渡された要素に幅指定 elem.height = 100; // 引数で渡された要素に高さ指定 }; ちなみに、JavaScriptを使わなくても widthかheightのどちらかを指定すれば同一の縦横比で表示してくれます。
- askaaska
- ベストアンサー率35% (1455/4149)
imgタグに最初からwidthとheightを指定してあげる じゃダメなの？ そうすれば問題なく領域内に収まると思うんだけど。
補足
ある程度多くの方に、画像をアップしてもらう事を、 想定しているので、imgタグ内の指定では、アップされた画像と 設定の縦横比が大きく変わって、一方に圧縮された画像が表示されてしまう可能性があるので、 この方法にこだわってみました。
- yyr446
- ベストアンサー率65% (870/1330)
ブラウザの更新ボタンを押した後は、関数処理後の画像が表示されるの なら、全部の画像がロードされた後でページをリロードすればあ、 <body onload="location.reload()">
補足
ご返答、有難うございます。 <body onload="location.reload()">を、 入れてみたところ、ページが、リロードを ずっと繰り返す状態になってしまいました。 何か、不備な点などあるのでしょうか。
補足
fujillin様 この件に関しまして、再び御付合い頂き、 有難うございました。サーバ上で動作確認ができました。 内容に関して、自分の理解の及ばないところもありますが、 今後調べて、理解を深めていきたいと思います。 重ねて、お礼を申し上げます。