jQuery + Ajax +加载微调器图像=太快！

Question

我在我的ASP.NET MVC 2页面中使用jQuery。这是一个超级简单的职位，获得一个日期作为回报。该过程本身运行速度非常快。我想使用微调图像来显示用户正在发生的事情。所有在Firefox中运行正常，在本地进行测试。但是，在IE 8中，微调图像显示的时间不够长;它只是闪烁。这可能会混淆最终用户，如果他们没有看到该进程正在工作/完成的迹象。解决这个问题最好的办法是什么？

谢谢。

<img id="signedout<%: item.Id %>" src="/Content/Images/signed_out.png" alt="Signed Out" title="Signed Out" style="display:none" /> 
       <div id="ajaxloader<%: item.Id %>" style="display:none;text-align:center"><img src="/Content/Images/ajax-loader.gif" alt="loading..." title="loading..." /></div> 

       <script type="text/javascript"> 
        $(function() { 
         var id = "<%: item.Id %>"; 

         $("#signout" + id).click(function() { 
          if (confirm("Are you sure you want to sign this visitor out?")) { 

           $(this).hide(); 
           //$("#signout" + id).hide(); 
           $("#ajaxloader" + id).show(); 

           var url = '<%: Url.Action("signout") %>'; 

           $.ajax({ 
            type: "POST", 
            url: url, 
            data: "id=" + id, 
            success: function (result) { 
             $("#timeout" + id).append(result); 
             $("#ajaxloader" + id).hide(); 
             $("#signedout" + id).show(); 
             $("#row" + id).css("background", "#E8E8E8"); 
            }, 
            error: function() { 
             alert("There was an unexpected error. Please try again later."); 
             $("#ajaxloader" + id).hide(); 
             $("#signout" + id).show(); 
            } 
           }); 
          } 
         }); 
        }); 
       </script> 

Answer 1

你可以在JS设置超时，这将保证微调不会被隐藏，直到后超时已经过期：

$.ajax({type: "POST", 
      url: url, 
      data: "id=" + id, 
      success: function (result) { 
       $("#timeout" + id).append(result); 
       setTimeout(HideLoadingSpinner, 2000); 
       $("#signedout" + id).show(); 
       $("#row" + id).css("background", "#E8E8E8"); 
      }, 
      error: function() { 
       alert("There was an unexpected error. Please try again later."); 
       setTimeout(HideLoadingSpinner, 2000); 
       $("#signout" + id).show(); 
      } 
    }); 

：

function HideLoadingSpinner() { 
     $("#ajaxloader" + id).hide(); 
    } 

然后用这个替换您的Ajax调用

如果由于计时器而出现奇怪的行为，您也可以将成功回调中的其他逻辑移入HidingLoadingSpinner函数。

Answer 2

难道你不能在重载后的几秒钟内在明亮的背景中显示“数据加载”消息，淡入淡出吗？

Answer 3

如果没有实际正在处理的内容，给出一些其他指示说明过程已完成而不是误导性地显示微调器可能是一个更好的主意。不过，你似乎设定了这一点。

这是基于amurra的答案，它被设计为一旦进程被加载就隐藏微调，当且仅当超时已经被返回。因此，如果AJAX请求返回“太快”，它将等待超时。

var timeoutComplete=false; 
var requestComplete=false; 

function HideLoadingSpinner() { 
    if(requestComplete) { 
     $("#ajaxloader" + id).hide(); 
    } else { 
     timeoutComplete=true; 
    } 
} 

同时，单击处理中......

setTimeout(HideLoadingSpinner, 2000); 

$.ajax({type: "POST", 
    url: url, 
    data: "id=" + id, 
    success: function (result) { 
     $("#timeout" + id).append(result); 
     $("#signedout" + id).show(); 
     $("#row" + id).css("background", "#E8E8E8"); 
     if(timeoutComplete) { 
     $("#ajaxloader" + id).hide(); 
     } else { 
     requestComplete=true; 
     } 
    }, 
    error: function() { 
     alert("There was an unexpected error. Please try again later."); 
     $("#ajaxloader" + id).hide(); 
     $("#signout" + id).show(); 
    } 
}); 

编辑：我只是删除了if(timeoutComplete)东西从error功能，以后还会有前一个alert反正。

Answer 4

我以前见过这个。其实你看到的是IE花费正常的时间来运行请求和FF花费比它应该更长的时间。您可以在about:config中设置network.dns.ipv4OnlyDomains到localhost，以显着加速本地主机上的FF。 Source。

在我自己的应用程序中，我遵循@ Im0rtality的建议并通知ajax请求已完成，并在发生时显示微调器。很多时候我甚至都看不到纺纱工。我使用JBar的custom implementation作为我非常专业的通知。

就显示在AJAX调用一个微调，你这包括在母版页的所有JQuery的AJAX期间表现出微调电话：

$(function() { 
    $('.spinner') 
    .hide() 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 
}); 

然后，你不必包括显示和隐藏spinner w /每个致电$.ajax。