某些 HTML 不想在 IE 中显示/隐藏。为什么？答案

【问题标题】：Certain HTML doesn't want to get shown/hidden in IE. Why?某些 HTML 不想在 IE 中显示/隐藏。为什么？
【发布时间】：2012-03-22 14:38:50
【问题描述】：

我有以下 HTML：

<div id="loading-overlay">
    <div id="loading-overlay-background"></div>
    <div id="loading-overlay-content">
        Processing...
        <br />
        <img src="@Url.Content("~/Content/img/ajax-loader.gif")" title="" alt="Please Wait" />
    </div>
</div>

还有 CSS：

#loading-overlay
{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:5000;
}
#loading-overlay-background
{
    position:relative;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
    z-index:5001;
}
#loading-overlay-content
{
    position:fixed;
    top:25%;
    left:50%;
    margin-left:-150px;
    margin-top:-20px;
    height:40px;
    width:300px;
    color:#fff;
    text-align:center;
    z-index:15002;
}

这里有一些 JavaScript (jQuery)：

$.ajax({
                url: 'controller/action',
                beforeSend: function () {
                    $('#loading-overlay').show();
                },
                success: function (data, textStatus, jqXHR) {
                },
                error: function (xhr) {
                },
                complete: function () {
                    $('#loading-overlay').hide();
                }
            });

为什么我的“加载覆盖”在任何 AJAX 调用的任何版本的 IE 中都没有显示？

编辑：是的，它在 FireFox 和 Chrome 中运行良好。这些 AJAX 调用可能需要几分之一秒到大约 20 秒才能完成。确实会显示警报消息，但不会显示 HTML。

【问题讨论】：

AJAX 调用需要多长时间才能完成？如果它们足够快，#loading-overlay 元素将显示然后再次隐藏并且可能不会被注意到。
它在其他浏览器中是否有效？
我会说 ajax 正在快速完成。在show() 调用后发出警报，看看它是否显示
我认为你的 ajax 执行得很快！在调用 .hide() 之前尝试执行 alert() 也许这会起作用。或者您可以简单地删除 .hide() 然后查看它是否显示
查看http://jsfiddle.net/yzZSU/。在 IE 9 和兼容性中都有效。我猜我们需要访问您的页面才能对此进行全面测试。

标签： javascript jquery html css internet-explorer

【解决方案1】：

试试这样的，

beforeSend: function () {
   $('#loading-overlay').show(1);
},

complete: function () {
    $('#loading-overlay').delay(500).hide(250);
}

查看实际情况，here..

编辑：

您也可以尝试降低动画帧速率。

使用jQuery.fx.interval = 50;

默认设置为 13 毫秒。使用.fadeIn() 增加此值可以减轻CPU 资源的负担。但是在调整这个时要小心。阅读更多here。

【讨论】：

看起来它即将推出，但我需要到办公室才能清楚地看到它的运行情况。现在去办公室。
好的。它即将出现，但在我看来，就像 beforeSend 中的 .show() 已经在成功执行 JS 时启动了。
我根据这个答案做了一些工作。简而言之，我在 success 内部重写了一些代码以加快处理时间，并将 .hide() 更改为 .fadeIn(200)。 IE 处理的动画与纯 CSS 更改（.show()）有些不同。它仍然不理想，但业务除外。现在继续，可能会在将来的某个时间回到这个问题。谢谢！
我的错！我实际上使用了 .fadeOut()。另外，我收到了关于 IE 无法正确渲染动画的投诉。将其更改为 .fadeOut(1) 似乎“修复”了 IE 问题。
@Dimskiy：使用fadeOut(1) 即淡入淡出超过 1 毫秒没有动画优势。你不妨使用.css('display', 'none')，它会更快，更不容易出错。

【解决方案2】：

谢谢大家，我只是很困惑，因为我的覆盖显示在除 IE 之外的所有浏览器中，现在这对所有浏览器都非常有效，我已将相同的内容集成到 jsf 页面中，这很好。

【讨论】：

【解决方案3】：

因为你完全隐藏了它。

它在成功/错误回调之后被调用。

【讨论】：

它应该在发送 ajax 之前显示，然后在 ajax 完成后隐藏