在 jQuery ajax 调用中加载 gif 未显示答案

【问题标题】：Loading gif in jQuery ajax call is not showing在 jQuery ajax 调用中加载 gif 未显示
【发布时间】：2013-05-29 07:43:23
【问题描述】：

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

我有一个 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() 之后设置几秒钟的超时 .. 但仍然没有。

我不知道该尝试什么。

【问题讨论】：

标签： jquery-ui jquery

【解决方案1】：

感谢所有建议和 cmets ...我已经找到了问题的根源 - 它是...归结为运行 ajax async 和我在错误的时间关闭对话框的组合。

【讨论】：

【解决方案2】：

希望对你有帮助

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

解决方案 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
      }

    });

【讨论】：

非常感谢

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

【讨论】：

【解决方案4】：

使用这个。

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();
    }
});

【讨论】：

jQuery ajax 中的 onLoading 是什么？
@Upland 调用 ajax 时调用 onLoading 事件。

【解决方案5】：

像这样将加载器 gif 添加为 html：

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

【讨论】：