在jQuery中加载gif ajax调用没有显示

Question

我确信这一定是我的一个基本错误 - 但我完全没有看到它。

我有一个jQuery UI对话框，我用它来呈现一个表单来编辑记录..在html的底部（它本身是通过ajax加载的）它有一个包含（动画加载gif）的div。加载html后隐藏加载div。

CSS将div放在右下角的绝对位置。

单击对话框上的“保存”按钮时，我调用一个函数通过ajax保存信息。在ajax电话中我有：

beforeSend: function() {
              $("#ajaxLoading").show();
        },
  complete: function() {
              $("#ajaxLoading").hide();
        }

问题是图像没有显示。

如果在初始对话框加载后删除hide（），则会始终显示gif。

我尝试将show（）放在ajax调用之前，而不是在beforeSend之前..仍然没有。

我尝试将show（）放在对话框设置中 - 在“保存”按钮中单击。什么都没有。

如果我在Chrome的脚本中添加断点并单步执行，那么我会看到gif！ 所以，我尝试在show（）之后再进行几次超时..但仍然没有。

我没有更多的想法可以尝试。

Answer 1

感谢所有的建议和意见......我已经解决了问题的根源 - 它是......这是由于运行ajax异步和我在错误的时间关闭对话框的组合。

Answer 2

使用此功能。

jQuery.ajax({
    data: 'your data',
    url: 'your url',                      
    type: "POST",
    dataType: "html",
    async:false,
    onLoading:jQuery("#ajaxLoading").html('<img src="http://example.com/images/spinner.gif" />').show(),
    success: function(data){ 
        jQuery("#ajaxLoading").fadeOut();
    }
});

Answer 3

我如何使用和运行精美的脚本......

$("#save_button").click(function () {
    // start showing loading...        
    $("#ajaxLoading").show();

    // make an ajax call
    $.ajax({
        type: 'POST',
        url: url,
        data: $("#form").serialize(),
        success: function() {
            // when success, hide loading.
            $("#ajaxLoading").hide();

            // your additional scripts
            if( a == null ){
                // some script          
            }
            else{
                // some script
            }
        }
    });

Answer 4

我希望这有帮助

  

我有同样的问题，我真的不知道它是如何发生的，但它可以   使用如下代码中的小延迟来修复。

解决方案1 ​​

$.ajax({
  method: "GET",
  url: "/",
  beforeSend:function(){
    $("#ajaxLoading").show(1);
    // please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
  },
  complete:function(data){
    $("#ajaxLoading").hide();
    //here i write success code
  }

});

解决方案2

   $.ajax({
      method: "GET",
      url: "/",
      beforeSend:function(){

        setTimeout(function(){
           $(".loader-image").show();
        }, 1);
        // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
      },
      complete:function(data){
        $(".loader-image").hide();
        //here i write success code
      }

    });

Answer 5

将加载程序gif添加为html，如下所示：

beforeSend: function() {
              $("#ajaxLoading").html('<img src="image source" />');
        },
  complete: function() {
              $("#ajaxLoading").html('')
        }