javascript - IE浏览器在显示微调器时对服务器端代码进行ajax调用时阻止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。所以任何人都可以指导我解决问题，提前谢谢。

标签： javascriptjqueryajaxasp.net-mvcinternet-explorer

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>

结果是这样的：

参考：使用 jQuery AJAX 示例显示带有覆盖的加载（忙碌）指示器（微调器）