Javascript 在后台执行ajax功能时，如何在页面上添加自定义动画图像？

我使用一个javascript文件在页面上添加一个动画图像，只要有一些ajaxStart（）方法正在进行，并在ajaxStop（）发生时将其删除。如何使用javascript或jQuery实现这一点？我试过这个代码，但不起作用

$(document).ajaxStart(function(){
   $('body').css('cursor', 'wait');
});

$(document).ajaxStop(function(){
   $('body').css('cursor', 'auto');
});

有人能帮我吗？

试试这个

css:

Jquery

$(document).ajaxStart(function(){
    $('body').append('<div class="ajaxLoader"> </div>');
    $('body').css('cursor', 'wait');
});

$(document).ajaxStop(function(){
   $('body .ajaxLoader').remove();
   $('body').css('cursor', 'auto');
});

$（文档）.ajaxStart（函数（）{
$（'body'）。追加（''）；
$（'body'）.css（'cursor'，'wait'）；
});
$（文档）.ajaxStop（函数（）{
$（'body.ajaxLoader'）.remove（）；
$（'body'）.css（'cursor'，'auto'）；
});

如果有帮助，试试这个

// prepare the form when the DOM is ready 
$(document).ready(function() { 

  // Setup the ajax indicator
  $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>');

  $('#ajaxBusy').css({
    display:"none",
    margin:"0px",
    paddingLeft:"0px",
    paddingRight:"0px",
    paddingTop:"0px",
    paddingBottom:"0px",
    position:"absolute",
    right:"3px",
    top:"3px",
     width:"auto"
  });
});

// Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});  

//在DOM就绪时准备表单
$（文档）.ready（函数（）{
//设置ajax指示器
$（'body'）。追加（'p>
'）；
$（'#ajaxBusy'）.css({
显示：“无”，
边距：“0px”，
填充左：“0px”，
paddingRight:“0px”，
paddingTop:“0px”，
填充底部：“0px”，
位置：“绝对”，
右：“3px”，
顶部：“3px”，
宽度：“自动”
});
});
//绑定到Ajax开始/停止文档事件的Ajax活动指示器
$（文档）.ajaxStart（函数（）{
$（'ajaxBusy'）.show（）；
}).ajaxStop（函数（）{
$（'#ajaxBusy'）.hide（）；
});  

首先检查这个

来自jQuery官方网站的文章：

“如果调用

$.ajax（）

或

$.ajaxSetup（）

时将

全局选项设置为
false
，则
.ajaxStart（）
方法将不会触发。”
设置
$（'body'）.css（'cursor'，'wait'）
实际上不起作用，应该在
html
元素上设置该样式

$(document).ajaxStart(function(){
   $('html').css('cursor', 'wait');
});

$(document).ajaxStop(function(){
   $('html').css('cursor', 'auto');
});


其他工作选择将是：

$(document.documentElement).css('cursor', 'wait');
$('*').css('cursor', 'wait');

等等。。。但是
$（'html'）
似乎是最合适的。
您使用的是哪个版本的jQuery库？使用以下命令：
beforeSend:function（）{//your loading image..}
事件运行正常，但您是否希望光标会改变，您是否仅使用CSS测试了这一点，以查看光标是否确实发生了变化？@Java_User：如果代码的不同部分有多个ajax请求，那么必须为每个ajax调用实例添加它。在这种情况下，这是行不通的。@dreamweiver:问题是错误是什么（如果有）。这是我展示的方式之一。Hi JF it我发现，如果我在脚本文件中启动任何ajax调用时添加警报代码，它就会出现。但是css不起作用。你知道为什么会发生这种情况吗？嗨，JF，谢谢你的快速响应。但是运气不好。我也试过了那个代码。但它不起作用。@Chiranjit现在呢？（仅更改css）；
$(document.documentElement).css('cursor', 'wait');
$('*').css('cursor', 'wait');