IEイメージwidth＆height = 0イメージがダウンロードされる前に

Question

私はjavascriptで作成したイメージ要素の幅&の高さのプロパティを設定しようとしています。 FFで、オペラ&クロームそれは正しく&高さを設定しています。しかし、IE6 & 7（8を試していない）の場合、画像がダウンロードされるまで、幅&の高さは0のままです。私がこれを必要とする理由は、各画像を現在のサイズに基づいて列& colに配置できるからです。

IEの幅&の高さのプロパティを設定できない場合は、独自のカスタムプロパティを作成してそこに設定する必要があると思います。

ここには、&という要素を挿入するために使用している基本的なコードがあります。

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

document.body.appendChild(wrap); 
wrap.appendChild(img); 

img.src = 'blah.jpg'; 
img.width = '100'; 
img.height = '100'; 
img.style.display = 'none'; 

// IE: width: 0 | height: 0 
// FF: width: 100 | height: 100 
alert('width: ' + img.width + ' | height: ' + img.height); 

EDIT：

私はimg.style.visibility代わりimg.style.display = 'なし' が= '隠された' を設定しようとしました。違いはありません。

EDIT

は私が問題を発見しました。実際の問題は、Azizソリューションと元の例で取り残したものの組み合わせです。 IEで、幅を割り当てる前に別の要素の中に要素を追加すると、&高さIEはそれを無視するだけです。

Answer 1

This problem is explained here

IEで正しい寸法を得るために、あなたは display: hidden visibility: hiddenを設定する必要があります。ただし、ブラウザがIEの場合にのみ設定する必要があります。

編集 （私のために動作します）これを試して

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

img.src = 'blah.jpg'; 
img.width = '3000'; 
img.height = '1000'; 

img.style.visibility = 'hidden'; 


document.body.appendChild(img); 

// should work correctly 
alert('width: ' + img.width + ' | height: ' + img.height); 

Answer 2

あなたはユニットが必要になります。

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

img.src = 'blah.jpg'; 
img.style.display = 'none'; 
img.style.width = '100px'; 
img.style.height = '100px'; 

document.body.appendChild(img); 

// IE: width: 100 | height: 100 
// FF: width: 100 | height: 100 
alert('width: ' + img.style.width + ' | height: ' + img.style.height); 

は、 "PX" ユニットを追加することを忘れないでください。クロスブラウザとの互換性のために、それぞれelement.widthとelement.heightの代わりにelement.style.widthとelement.style.heightを使用してください。