Загрузка изображения не отображается при загрузке HTML

Question

Я пытаюсь показать изображение загрузки до HTML контента нагрузок, но это не появляясь перед HTML нагрузки по некоторым причинам:

Вы можете увидеть его в действии здесь: http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/

нажмите «Воспроизвести >>>» Начало игры ... это затем загружается в 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); 
       }; 

     }); 
    }); 

Answer 1

Второй аргумент проводке к .load() является обратного вызова, который выполняется после содержимое загружено. Перед вызовом .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); 
       }; 

     }); 
    });