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

当没有实际处理任何内容时，给出一些其他指示表明该过程已经完成而不是误导性地显示微调器可能是一个更好的主意。但是你似乎已经开始这样了。

这是基于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 2

您是否只能在明亮的背景中显示“已加载数据”消息，并在重新加载后几秒内消失？

Answer 3

您可以在js中设置超时，这可以保证在超时到期之前不会隐藏微调器：

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

然后用这个替换你的ajax调用：

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

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

Answer 4

我之前见过这个。实际上你所看到的是IE花费了正常的时间来运行请求， FF需要的时间比应该。您可以在network.dns.ipv4OnlyDomains中将localhost设置为about:config，以显着加快localhost上的FF速度。 Source

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

至于在AJAX调用期间显示一个微调器，你可以在主页面中包含它以在所有JQuery AJAX调用期间显示一个微调器：

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

然后，您不必在每次调用$.ajax时都显示和隐藏微调器。

jQuery + Ajax +加载Spinner Image =太快了！

4 个答案: