Google Chromeで画像の読み込みが完了するまでサイズが取得できない

バグなのかこういう仕様なのか分かりませんが、Google Chromeで画像の読み込みが完了しないとJavaScriptでサイズの取得ができない件の対応方法です。

サンプルコード

取得できない場合のサンプルコードです。

HTML

<img src="http://placehold.it/300x100" width="300" width="100" id="sample">

JavaScript

var sample = document.getElementById('sample');
console.log('sample.height:' + sample.height); // 0

$(function() {
	var $sample = $('#sample');
	console.log('$sample.height():' + $sample.height()); // 0
});

画像が読み込まれていない時点でサイズを取得しようとすると、うまく取得ができません。
(ブラウザバックなどキャッシュが残った状態だと取得できるようです。)
Google Chromeで画像サイズが取得できないデモページ
　

解決方法

window.onloadや$(window).loadを使って、画像が読み込まれた後にサイズを取得するようにします。

JavaScript

window.onload = function() {
	var sample = document.getElementById('sample');
	console.log('sample.height:' + sample.height); // 100
};

$(function() {
	$(window).on('load', function() {
		var $sample = $('#sample');
		console.log('$sample.height():' + $sample.height()); // 100
	});
});

対応後のデモページ
　

特定の画像が読み込まれたら、という形で問題なければ以下の形でも取得できます。

JavaScript

var sample = document.getElementById('sample');
sample.onload = function() {
	console.log('sample.height:' + sample.height); // 100
};

$(function() {
	var $sample = $('#sample');
	$sample.on('load', function() {
		console.log('$sample.height():' + $sample.height()); // 100
	});
});

対応後のデモページ2