画像の高さを取得できません。代わりにnaturalHeightを取得します。

Question

アップロード前に画像のプレビューを表示する簡単なハンドラーを作成しています。ここに私のサンプルコードは次のとおりです。

function subscribeImageShower() { 
    $('input[type="file"][data-image-show]') 
     .each(function() { 
      var $input = $(this); 
      var $img = $($input.data('image-show')); 
      var selectCallback = window[$input.data('image-selected')]; 
      var unselectCallback = window[$input.data('image-unselected')]; 

      $(this) 
       .on('change reset', 
        function() { 
         if (this.files && this.files[0]) { 
          var reader = new FileReader(); 
          reader.onload = function(event) { 
           $img.attr('src', event.target.result); 
           $img.show(); 

           if (selectCallback) { 
            $img.one('load', selectCallback); 
           } 
          }; 
          reader.readAsDataURL(this.files[0]); 
         } else { 
          $img.removeAttr('src'); 
          $img.hide(); 
          if (unselectCallback) { 
           unselectCallback($img[0]); 
          } 
         } 
        }); 
     }); 
} 

マークアップ：選択したコールバックで

<div class="modal-body"> 
    <div id="logoCanvasDiv"> 
     <img id="logoSampleImg" width="350" style="position: absolute;"/> 
     <canvas id="logoCanvas" width="350" style="border: thick; position: absolute"></canvas> 
    </div> 
    <div> 
     <input type="file" name="modelFile" data-image-show="#logoSampleImg" data-image-selected="onLogoSelected" data-image-unselected="onLogoUnselected"/> 
     <input type="hidden" name="objectId" value="@Model.PageObject.Id" hidden /> 
    </div> 
</div> 

私は画像の幅と高さを取得したい：

画像については

function onLogoSelected(event) { 
    var img = event.target; 
    alert('jQuery height = ' + $(img).height()); 
    alert('DOM height = ' + img.height); 
} 

幅800x600と次の例では、私はそれぞれ0と600になります。 しかし、いつか私は実際の画像サイズ - 350x263を取得します。

なぜこのような無効な情報が得られますか？イメージサイズが完全にロードされた後、どのようにイメージサイズを取得できますか？ loadイベントを購読しましたが、動作していないようです。

再現方法：ファイルを選択してください。正しく読み込まれています。ファイルの選択を解除します。次に、それを再度選択します。今すぐheightは無効です。

Answer 1

私は全体のコールバックテキストを投稿し、ここでの問題だったしませんでした、その答えを見つけました：画像が読み込まれたとき

function onLogoSelected(event) { 
    var img = event.target; 
    console.log(img.height); 
    $('#logoCanvasDiv') 
     .css({ 
      'width': img.width, 
      'height': img.height, 
      'margin-bottom': 10, 
      'position': 'relative' 
     }) 
     .show(); 
}; 

function onLogoUnselected() { 
    $('#logoCanvasDiv').hide(); 
}; 

親のdivが隠されていたことが0に高さをsettedなぜ、これがあります。

解決方法：すべての親要素が表示されていることを確認してください。