CODEWITHSUNDEEP
jqueryajaxloader
user1937021
user1937021

Reputation: 10771

show loading gif while html loads with Ajax

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. 

$('#loading-image').bind('ajaxStart', function(){
          $(this).show();
    }).bind('ajaxStop', function(){
          $(this).hide();
        });

I want the loading image to appear when loading in the content of game.html to the .content element. 

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

When you click on "play", then the button "start the game" executes the following code:

$( ".content" ).load("game.html"....

the HTML and css:

Upvotes: 1

Views: 4766

Answers (2)

ingo
ingo

Reputation: 5569

Please refer to the upgrade guide for jquery 1.9.0.

AJAX events should be attached to document

As of jQuery 1.9, the global AJAX events (ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess) are only triggered on the document element. Change the program to listen for the AJAX events on the document. For example, if the code currently looks like this:

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); });

Change it to this:

$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });

Upvotes: 3

Musa
Musa

Reputation: 97672

Try using beforeSend and complete in $.ajaxSetup

$.ajaxSetup({
    beforeSend: function(){
        $('#loading-image').show();
    },
    complete: function(){
        $('#loading-image').hide();
    }
});

Upvotes: 2

Related Questions