IEでonload前にイメージのサイズを取得できない

IE8 以下では、イメージ要素の挙動が他のブラウザとずいぶん違うみたいです。

例えば、次の記事ではロード完了後の画像の実際のサイズの取得の仕方を公開してくださっているが、ブラウザ毎に挙動が様々なことが分かる。

JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法

～で、こちらはロード前に画像のサイズの取得がおかしい、という話。

そもそもロード前に画像のサイズが分かると書くと、それなんてエスパー？といわれそうですが。

単純に img タグの width, Height プロパティから取ろうというだけ。しかし IE では 0 が返ってしまう。

もちろん他のブラウザでは、それぞれタグに書かれている数字がきちんと返る。

また以上の症状は、DOM ツリーの構築が終わりイメージも読み込みが済んだという、window.onload を待たないで、DOMツリーの構築が済んだ段階の onDOMContentLoaded のタイミングでスクリプトを走らせて遭遇した。

仕方がないので、IE の場合は IE 独自プロパティの outerHTML で、イメージのタグの内容を取得して、正規表現で切り出して対処した。

var imgHtml = img.outerHTML;
w = imgHtml ? imgHtml.replace(/.*width=['"]?([0-9]+)['"]?.*/, '$1') : img.width;
h = imgHtml ? imgHtml.replace(/.*height=['"]?([0-9]+)['"]?.*/, '$1') : img.height;

ちなみにクロスブラウザな onDOMContentLoaded のためには以下の記事を読みライブラリを使わせていただいた。

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js