htmlに読み込む前に、どのように画像サイズを取得できますか？

Question

最初の画像の高さはゼロになります。その後、ページをリフレッシュして実際の高さを取得しています。私は最初にその高さを取得する必要がありますか？どのような体が私を助けることができる？

$j(document).ready(function(){ 
      var imgV = new Image(); 
      imgV.src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG"; 
      $j("#imgD").html(imgV.height); 
      alert(imgV.height); 
}); 


<div id="imgD"></div> 
<img src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG" /> 

Answer 1

あなたは、その寸法を取得するために、DOMに画像を挿入する必要はありません。

$("<img />") 
    .attr("src", "http://www.google.com/intl/en_ALL/images/logo.gif") 
    .load(function() { 
     alert(this.width); 
     alert(this.height); 
    }) 
; 

Answer 2

画像サイズは、画像が読み込まれたときにのみ使用できます。ページをリロードすると、画像がすぐにキャッシュから提供されるため、そのサイズは即座に利用可能になります。

イメージを表示する前に何らかの理由でサイズを取得する必要がある場合は、まずそれをオフスクリーンで表示できます。画像の準備ができたら呼び出されるonloadハンドラを追加します。次に、そのサイズを調べて、必要な場所に添付します。

オフスクリーンで表示すると、オーバーフロー：hiddenスタイルで、1x1ピクセルのdivに貼り付けられることがページの下部に表示されます。