jquery - HTMLの読み込み中に読み込み中の画像が表示されない

Question

HTML コンテンツが読み込まれる前に読み込み中の画像を表示しようとしていますが、何らかの理由で HTML が読み込まれる前に表示されません。

ここで実際の動作を確認できます: http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/

Play >>> Start the game... をクリックして、HTML に読み込みます。

HTML

<div id="loading-image"></div>

CSS

#loading-image{
    background:url(../img/ajax-loader.gif) no-repeat 0 0;
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;    
    margin-left:-8px;
    display:none;
}

Jクエリ:

$('body').on('click', '.mch-ajax', function(e){
        e.preventDefault();
        $('#mch-overlay').fadeOut(300);
        $( ".content" ).load("game.html", function() {
            $("#loading-image").show();
                var myBackgroundImage = new Image();
                myBackgroundImage.src = "http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/img/bg-map.png";        
                myBackgroundImage.onload = function () {
                    $("#loading-image").hide();
                    $( ".map" ).fadeIn(300);
                    $( ".note" ).delay(400).fadeIn(700);
                    $( ".route" ).delay(800).fadeIn(700);
                    $( ".start-btn" ).delay(1200).fadeIn(700);
                };

        }); 
    });