2

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?

You can seee what I'm working on here:

click on play >>> start the game.

You'll see background image of the map loading in.

my jquery code at the moment is as follows:

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

Thanks!

4

1 に答える 1

5

You can detect the load of an image like so,

var myBackgroundImage = new Image();
myBackgroundImage.src = "/{Image Path}";      

myBackgroundImage.onload = function () {
  //Now do what ever you need to as the image is loaded
};
于 2013-02-19T17:24:57.777 に答える