JavaScriptでイメージ変数の高さと幅を取得する

Question

イメージ変数にピクチャをロードし、それをフレームに入れるために横長か縦長かをテストしようとしています。ユーザーは、ドロップダウンからURLを選択します。しかし、次のスニペットは、おおよそ0の幅を与えます。私は何をしているのですか？

 var Select_Picture = document.getElementById("ddlSelectPicture"); 
     var Client_Picture = document.getElementById("imgClientPicture"); 
     var Temp_Image = new Image(); 
     var Image_Height; 
     var Image_Width; 

     Temp_Image.src = Select_Picture.value; 

     // WAIT FOR PICTURE TO LOAD 
     while (Temp_Image.width < 1 || Temp_Image.height < 1) 
     { 
      Image_Width = Temp_Image.width; 
     } 
     Image_Height = Temp_Image.height; 

     alert(Image_Width + " " + Image_Height); 

Answer 1

画像を読み込む前に、画像の高さと幅を読み取ろうとしています。
onloadは、Temp_Imageの読み込みが完了すると呼び出されるため、画像の幅と高さが変わります。

Temp_Image.onload = function() { 
    console.log(Temp_Image.width); 
} 
Temp_Image.src = Select_Picture.value; 

Answer 2

あなたは直接このような高さと幅を取得することができます：

var height = document.getElementById("myImg").height; 
var width = document.getElementById("myImg").width; 

Answer 3

Javascriptをシングルスレッドであっても、ブラウザではありません。だからあなたの無限ループでユーザーのシステムを慌てて停止させるために最善を尽くしている間も、ブラウザはまだイメージをロードすることができ、アクセスするためにはJavaScriptの世界にそのプロパティをプッシュする必要があります。

あなたのwhileループは、ブラウザが実行しようとしているすべてのjavascriptにジャンプし続けますので、イメージが準備完了しても、イベントループの多くのサイクルが実際に画像にwidthとheightがあり、同じループで更新されない可能性があります。

だからあなたのテストは次のように起こっている：（我々はそれがX 100pxに100pxにだふり）

// repeat this over and over and over 
if (Temp_Image.width < 1) /* true */ 
    Image_Width = Temp_Image.width /* 0 */ 

// until finally 
if (Temp_Image.width === 0 /* false */) 
    // okay we finally branched into right side of expression 
    if (Temp_Image.height < 1) /* ??? */ 
     // what now? 

まあ、その真の（まだ利用できないという意味高さ）場合、それは次のようになります。

// keep repeating this over and over and over 
if (Temp_Image.width < 1) /* false */ 
    if (Temp_Image.height < 1) /* true */ 
     Image_Width = Temp_Image.width /* 100 */ 

// until finally 
if (Temp_Image.width < 1) /* false */ 
    if (Temp_Image.height < 1) /* false */ 
     break 
Image_Height = Temp_Image.height /* 100 */ 

// we've finally left the loop and the width is properly set 

まあ（高さはすでに利用可能という意味）そのfalseの場合、それは次のようになります。

if (Temp_Image.width < 1) /* false */ 
    break 
Image_Height = Temp_Image.height /* 100 */ 

// wait... hold on... we forgot to set the width 

あなたは、ループの各反復で何度も0に幅を設定していますが、最終的には実際の幅の値を受信したときの高さのプロパティが既に利用されている場合は、ループの先頭の前で破りますそれを変数に格納します。

最初に設定するプロパティ（幅または高さ）が50/50の結果で明確に示されていることは保証されません。

これはループを学習するためのものであれば、次に自分自身で正しく動作させるようにしてください。答えが明らかでない場合は、良い練習になるかもしれません。

しかし、実際にブラウザで画像を提供しようとしている場合は、そのようにしないでください！あなたはスレッドをブロックしています！やめろ！

ループの代わりにloadイベントをリッスンするという既定のアドバイスに従ってください。