JavaScriptで複数画像のプリロード

javascriptで複数の画像をプリロードする方法を考えてみたんだけど、こんなシンプルで大丈夫なんだろうか…。

絶対落とし穴がありまくる気がするけど、とりあえず動いてはいるから良いか(;・∀・)

応用して、ゲームでロード画面作れば、読み込み中でグダグダになる事も無くなる…ハズ!
enchant.js便利だし好きだけど、自分で1から作れないとネー(*´・ω・)(・ω・`*)ネー

<!DCOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<script>
window.onload = function() {

// 読み込んだ数カウント
var imgCnt = 0;

// イメージオブジェクト
var Img = new Array();

// 読み込む画像
var IMG = new Array(
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg'
);

// 何枚中何枚目かを表示
document.getElementById('hoge').innerText = imgCnt + " / " + IMG.length;

//
for(i = 0; i < IMG.length; i++){

Img[i] = new Image();
Img[i].src = IMG[i];

Img[i].onload = function() {
// 読み込んだカウントアップ
imgCnt++;

// 何枚中何枚目かを表示
document.getElementById('hoge').innerText = imgCnt + " / " + IMG.length;

// カウントと画像数が一緒になったら実行
if(imgCnt == IMG.length) loaded();
}
}

// ロード完了時に呼び出し
function loaded() {
document.getElementById('hoge2').innerText = "ロード完了";
}
}
</script>

<body>
<span id="hoge"></span>
<span id="hoge2"></span>
</body>

</html>