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

【问题标题】：show loading gif while html loads with Ajax在使用 Ajax 加载 html 时显示加载 gif
【发布时间】：2013-02-19 16:21:20
【问题描述】：

我想在加载我用 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：

【问题讨论】：

标签： jquery ajax loader

【解决方案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 开始"); });

改成这样：

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

【讨论】：

谢谢，但是我将如何修改我的代码，这不是很清楚。
f.e. $(document).ajaxStart(function(){ $('#loading-image').show(); });

【解决方案2】：

尝试在$.ajaxSetup 中使用beforeSend 和complete

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

【讨论】：