在显示微调器时对服务器端代码进行 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="https://i.stack.imgur.com/nOAYl.gif" />
    </div>
</div>

结果是这样的：

参考：Show Loading (Busy) Indicator (Spinner) with Overlay with jQuery AJAX example

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

IE browser block UI when making ajax call to server side code while showing spinner

javascript

ajax

asp.net-mvc

jquery

internet-explorer