Firefoxの.naturalHeightプロパティ

Question

私は次のコードを持っている：

var checkImgDim=new Image(); 
checkImgDim.src=e.target.result; 

if (input.files[0].size > MAX_SIZE) 
    setError("File too large - max 3MB"); 

else if (checkImgDim.naturalHeight < MIN_H || 
      checkImgDim.naturalWidth < MIN_W) 
    setError("Image dimensions too small"); 

をそれはnaturalHeightとnaturalWidthは時々0を返すようですので、私は一貫性のない結果を得ているし、前に遅延がありますFirefoxでしかしクロームの下で正常に動作します値が設定されます。私はDOMに画像をロードしたり、コードの目的が画像の大きさをチェックするだけである.onload（）を使用したくない。私はここで時間の遅れを追加するのがよい習慣ではないと思う。誰かがイメージの大きさをチェックする適切な方法を教えてください。 - onloadイベントが呼び出される前に、それは技術的に寸法を返しますが、このソリューションは、あなたが言ったように遅延を使用し

私はそれが0秒の間隔を使用してロードされています前に、あなたがイメージ寸法を得ることができると思う：ONLOADなしEDITED

Answer 1

イメージサイズが読み込まれる前に取得できません。イメージのloadイベントを使用する必要があります。たとえ画像URLが実際にはデータURI（例えば、FileReaderから来たもの）であっても、それは画像オブジェクトに非同期的にに「ロード」される。

イメージをHTML要素としてDOMに挿入する必要はありません。新しいImageオブジェクトを作成し、loadリスナーを追加してから、srcプロパティを設定します。

画像はすでにそれが再びダウンロードされることはありません、以前にダウンロードされている場合 - そのキャッシュされたコピーは、（限り、クライアント側キャッシュ自体が対応するサーバーのレスポンスヘッダを経由して意図的に無効になっていないとして）代わりに使用されます。イメージURLが実際にデータURIである場合、ダウンロードは全くありません。

naturalWidthとnaturalHeightのプロパティは比較的新しく、一部のブラウザではサポートされない場合があります。したがって、通常のwidthとheightプロパティを使用するのは、現在のところ信頼性が高く、値が明示的に変更されていない限り、同じ値です。

Answer 2

あなたはそれをやり遂げる別の方法を考えることはできません。この方法は、少なくとも負荷よりも速いです。

var loaded = false; 
var checkImgDim = new Image(); 

checkImgDim.onload = function() { loaded = true; }; 

var wait = setInterval(function() { 
    if (loaded) { 
     clearInterval(wait); 
    } else { 
     console.log(checkImgDim.naturalWidth, checkImgDim.naturalHeight); 
    } 
}, 0);