イメージが完全にロードされる前にJavaScriptを使用してイメージのサイズを取得する

Question

イメージが完全に読み込まれたらイメージのサイズを取得する方法については読んだことがありますが、読み込みを開始したばかりのイメージのサイズは取得できます？

私はこれを検索することでそれほど多くのことを知ることはできませんでしたが、それは可能ではないと私に信じさせていますが、Firefox（私の場合はFirefox）が新しいタブそれはちょうどイメージをロードし始めた後のタイトルでは、実際には方法があると私はそれを見つけるために適切なキーワードを逃したことを願っています。

Answer 1

完全に読み込まれる前に画像の寸法を取得することができます。

はここ溶液（demo）です：

var img = document.createElement('img'); 

img.src = 'some-image.jpg'; 

var poll = setInterval(function() { 
    if (img.naturalWidth) { 
     clearInterval(poll); 
     console.log(img.naturalWidth, img.naturalHeight); 
    } 
}, 10); 

img.onload = function() { console.log('Fully loaded'); } 

Answer 2

1つの方法は、応答のHTTPヘッダーのみを要求するHEAD要求を使用することです。私はHEADレスポンスで知っている、ボディのサイズが含まれています。しかし、イメージのサイズに利用できるものがあるかどうかはわかりません。

Answer 3

は実際に、それは非常に簡単です、あなただけのイメージのonload関数の寸法を取得する必要があります。

var tempImage1 = new Image(); 
tempImage1.src = "path/to/image"; 
tempImage1.onload = function() { 
    console.log(tempImage1.width, tempImage1.height); 
} 

Answer 4

次のコードは、使用可能になるとすぐに幅と高さを返します。テストのために、画像ソース内の変更するabc123をランダムな文字列に変更して、キャッシュを防止します。

JSFiddle Demoもあります。

<div id="info"></div> 
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123"> 

<script> 
getImageSize($('#image'), function(width, height) { 
    $('#info').text(width + ',' + height); 
}); 

function getImageSize(img, callback) { 
    var $img = $(img); 

    var wait = setInterval(function() { 
     var w = $img[0].naturalWidth, 
      h = $img[0].naturalHeight; 
     if (w && h) { 
      clearInterval(wait); 
      callback.apply(this, [w, h]); 
     } 
    }, 30); 
} 
</script>