jquery - 在使用 Ajax 加载 html 时显示加载 gif

Question

我想在使用 Ajax 加载的 html 加载时显示加载图像，以下代码似乎不起作用。

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

我希望在将 game.html 的内容加载到 .content 元素时显示加载图像。

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

当您点击“开始游戏”按钮时，“开始游戏”按钮将执行以下代码:

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

HTML 和 CSS:

Answer 1

请引用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"); });