1

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

4

2 回答 2

3

请参考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 开始"); });

于 2013-02-19T16:34:55.217 回答
2

尝试使用beforeSend并complete输入$.ajaxSetup

$.ajaxSetup({
    beforeSend: function(){
        $('#loading-image').show();
    },
    complete: function(){
        $('#loading-image').hide();
    }
});
于 2013-02-19T16:28:11.503 回答