- 締切済み
画像サイズの読み込み
お世話になります。 javascriptで画像サイズを取得し、そのサイズに合わせてimgタグhtmlを吐き出すという処理を行っています。 ------------------ var i = new Image(); //**step1 i.src = strPath; //**step2 hhh = i.height; //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ 上記において、**step2と**step3の間に、alert文を入れると、うまく画像サイズを取得できるのですが、alertがないと、hhh = 0 になってしまいます。 （うまくいくケースは以下↓） ------------------ var i = new Image(); //**step1 i.src = strPath; //**step2 alert("sdf"); hhh = i.height; //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ なぜでしょうか・・・かれこれ数時間悩んでいろいろ試してみましたが、原因がサッパリわかりません。 ちなみに、hhh = 0 になるのは、最初の１回だけ、二度目にここを通ると、alertがなくてもhhhには正しく数値がセットされます。 どなたか、何かヒントになるようなことでもあれば、おしえてください。よろしくおねがいします。
- upperground
- お礼率62% (30/48)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- arenani_sorenani
- ベストアンサー率73% (58/79)
書いてあったソースをそのまま移して書きましたが 変だな思っていたところがあります。 <img src='' id='backImage' height='" + hhh + "' /> srcのところにImagaeのパス指定がないので別の画像を表示するのかと 思いましたが、単なる記述もれでしょうか？ もしiと同じパスなら str="<img src='"+strPath+"' id='backImage' height='" + hhh + "' />"; として見て下さい。
補足
ご返信ありがとうございます。 > もしiと同じパスなら > str="<img src='"+strPath+"' id='backImage' height='" + hhh + "' />"; > として見て下さい。 おっしゃるとおりのような気がします。そのようにしてみました。 ここへきて、詳しい説明をしても遅いのですが(すみません)、やはり書いておかないといけない気がします。 このjavascriptは、jsファイルとして単独で存在しており、画面表示はphp＋htmlで行っています。 表示された画面上のボタンをクリックたびに、あらかじめサーバーに用意されている画像や動画ファイルを表示する、という仕組みです。（画面のボタンをクリックするたびに、onclickでjsファイルの関数を呼び出す） ボタンをクリックするたびに、表示される画像がパッパッとかわっていくわけですが、その画像を表示させる領域の大きさが固定されているため、その領域より大きな画像はそれに合わせて縮小させようとしています。そのため、imageオブジェクトの.heightや.widthで幅・高さを取得して、htmlではきだすときにwidth="**" やheight="**"を指定しようとしています。 そして現在の問題が、imageオブジェクトから画像サイズを取得しようとすると、ゼロになってしまう(alertで一旦とめれば、正常に取得できる)という状況です・・・。 （今更ながらの説明で、すみません） 下記抜粋ソースを、alertで処理の流れを追うと、 point-A → point-C → point-D の順にいっており、point-Bには入っていませんでした。そして画面には、サイズ未調整の画像がそのまま表示され、htmlのテーブルがこわれています。 どこかおかしいことを書いていると思うのですが、ご指摘いただければ助かります。よろしくお願いいたします。 if(!document.backImage) { var i = new Image(); i.src = strPath ; var strhtml = '<img src="' + i.src + '" id="backImage" style="z-index:0; "></img>'; document.getElementById("showMedia").innerHTML = strhtml; // ** point-A ** i.onload = function() { // ** point-B ** var strheight = i.height; var strwidth = i.width; strhtml = '<img src="' + i.src + '" id="backImage" height="' + strheight + '" width="' + strwidth + '" style="z-index:0; "></img>'; if(strheight > strwidth) { if(strheight > 350) { strhtml ='<img src="' + i.src + '" id="backImage" height="350" style="z-index:0; "></img>'; } } else if(strheight < strwidth) { if(strwidth > 425) { strhtml ='<img src="' + i.src + '" id="backImage" width="425" style="z-index:0; "></img>'; } } else { if(strheight > 350) { strhtml ='<img src="' + i.src + '" id="backImage" height="350" style="z-index:0; "></img>'; } } document.getElementById("showMedia").innerHTML = strhtml; } // ** point-C ** } // ** point-D ** document.getElementById("backImage").src = strPath ;
- arenani_sorenani
- ベストアンサー率73% (58/79)
原因はイメージがロードされる前にstep3が実行されるからのように思えます alert()をいれるとstep3へ行く前にロードが完了する時間の余裕ができるから。 なので ＃1の方が書かれてるように画像のロードを引き金にして step3へ移行するようにすればいいかと思います。 例） <script type="text/javascript"> var i = new Image(); i.src = strPath; i.onload=function(){ hhh = i.height; str="<img src='' id='backImage' height='" + hhh + "' />"; document.getElementById('aaa').innerHTML =str; } </script> <body> <div id="aaa"> </div> </body>
補足
arenani_sorenaniさん、詳しい解説、どうもありがとうございました。さっそくやってみたのですが・・・ var i = new Image(); i.src = strPath; i.onload=function(){ // ** step1 var hhh = i.height; str="<img src='' id='backImage' height='" + hhh + "' />"; document.getElementById('aaa').innerHTML =str; } とコーディングしているのですが、** step1 へ処理が移ることがありません・・・function(){}に入ることなく次の処理へ進んでしまいます。(画像が表示されないままプログラムが実行される) ちなみに、i.srcをalertで確認してみても、正しいURLがセットされています。 たびたび申し訳ありませんが、どこかおかしい部分があればご指摘ねがえませんでしょうか。 よろしくお願いいたします。
complete http://www.openspc2.org/JavaScript/ref/image/complete.htm onLoad http://www.openspc2.org/JavaScript/ref/event/onLoad.htm
お礼
ご返信、ありがとうございます。 まさにこんなかんじを求めていました。
お礼
質問者のくせに、返信が大変遅くなり申し訳ございません。 nonameさん、ありがとうございます。 が、、、すみません、appendImageの部分、ちょっと理解できず・・（知識不足ですみません。）これはどういう処理をおこなっているのでしょうか、教えていただけると助かります。