title: show loading gif while html loads with Ajax
body: <p>I want to show a loading image while the html I load in with Ajax is loading,  the following code doesn't seem to work. </p>
  
  <pre><code>$('#loading-image').bind('ajaxStart', function(){
            $(this).show();
      }).bind('ajaxStop', function(){
            $(this).hide();
          });
  </code></pre>
  
  <p>I want the loading image to appear  when loading in the content of game.html to the .content element. </p>
  
  <pre><code>$('body').on('click', '.mch-ajax', function(e){
          e.preventDefault();
          $('#mch-overlay').fadeOut(300);
          $( ".content" ).load("game.html", function() {
                  $( ".note" ).delay(400).fadeIn(700);
                  $( ".route" ).delay(800).fadeIn(700);
                  $( ".start-btn" ).delay(1200).fadeIn(700);
          }); 
      });
  </code></pre>
  
  <p>When you click on "play", then the button "start the game" executes the following code:</p>
  
  <pre><code>$( ".content" ).load("game.html"....
  </code></pre>
  
  <p>the HTML and css:</p>