javascript - 在显示微调器的同时对服务器端代码进行 ajax 调用时，IE 浏览器会阻止 UI

Question

我在我的应用程序中使用jquery、mvc 我遇到这样的情况:当 ajax 调用服务器端代码正在进行时，我想显示微调器/加载图像。因此，我对服务器端代码进行了异步调用，如下所示，但在 Internet Explorer 上，其阻塞 UI 和加载图像不会显示旋转。

下面是我的ajax调用代码

 function GetDetails(){
 $('.spinner').show();
  var requestObject = {
            url: url,
            type: "POST",
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            async: true,
            success: function (data) {
              $('.spinner').hide();
               result = data;
             }
      };
   }

但在我收到 ajax 加载程序的响应之前，图像会卡住并且不会将其显示为正在加载。 看来 IE 浏览器实际上阻止了 UI。那么谁能帮我解决这个问题，先谢谢了。

Answer 1

尝试清除IE浏览器缓存和cookie，或者重新启动IE浏览器和电脑。

由于无法使用您的代码重现该问题，因此我使用以下代码创建了一个示例，它在我这边运行良好(使用 Chrome、Microsoft Edge 和 IE 11 浏览器)，您可以引用。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnGet").click(function () {
            $.ajaxSetup({
                global: false,
                type: "GET",
                url: "https://api.ipify.org/?format=json",
                beforeSend: function () {
                    $(".modal").show();
                },
                complete: function () {
                    $(".modal").hide();
                }
            });
            $.ajax({
                data: "{}",
                success: function (r) {
                    $("#lblIPAddress").html("IP Address: " + r.ip);
                }
            });
        });
    });
</script> 
<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    .modal {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .center {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }

        .center img {
            height: 128px;
            width: 128px;
        }
</style>

<input type="button" id="btnGet" value="Get IP Address" />
<br />
<br />
<span id="lblIPAddress"></span>
<div class="modal" style="display: none">
    <div class="center"> 
        <img src="/image/nOAYl.gif" />
    </div>
</div>

结果如下:

引用:Show Loading (Busy) Indicator (Spinner) with Overlay with jQuery AJAX example