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事件应附加到文档

从jQuery 1.9开始，全局AJAX事件（ajaxStart，ajaxStop，   ajaxSend，ajaxComplete，ajaxError和ajaxSuccess）仅被触发   在文档元素上。更改程序以侦听AJAX   文件上的事件。例如，如果代码当前看起来像   这样：

$（“＃status”）。ajaxStart（function（）{$（this）.text（“Ajax started”）;}）;

将其更改为：

$（document）.ajaxStart（function（）{$（“＃status”）。text（“Ajax started”）;   }）;

Answer 2

尝试在beforeSend

中使用complete和$.ajaxSetup

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

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

2 个答案: