jquery - Loading image not showing while loading html -

jquery - Loading image not showing while loading html -

i trying show loading image before html content loads, it's not appearing before html loads reason:

you can see in action here: http://www.machinas.com/wip/esprit/games/2013_spring_game/html/

click play >>> start game... loads in 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; }

jquery:

$('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); }; }); });

the sec argument post .load() callback, executed after content has loaded. need move loading image logic before phone call .load().

$('body').on('click', '.mch-ajax', function(e){ e.preventdefault(); $('#mch-overlay').fadeout(300); $("#loading-image").show(); $( ".content" ).load("game.html", function() { 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); }; }); });

jquery ajax loader