title: Don't display until background image is fully loaded
body: <p>I'm loading in an external html with Ajax into a page, this external image has a large background image and I'd like the loading gif to display until the background image has fully loaded, is this possible?</p>
  
  <p>You can seee what I'm working on here:</p>
  
  <p>click on play >>> start the game. </p>
  
  <p>You'll see background image of the map loading in.</p>
  
  <p>my jquery code at the moment is as follows:</p>
  
  <pre><code>$(document).bind('ajaxStart', function(){
            $('#loading-image').show();
       }).bind('ajaxStop', function(){
            $('#loading-image').hide();
          });
  
      $('body').on('click', '.mch-ajax', function(e){
          e.preventDefault();
          $('#mch-overlay').fadeOut(300);
          $("#loading-image").show();
          $( ".content" ).load("game.html", function() {
                  $("#loading-image").hide();
          }); 
      });
  </code></pre>
  
  <p>Thanks!</p>