jQuery Ajax 微调器未在 IE7 中显示答案

【问题标题】：jQuery Ajax spinner not displaying in IE7jQuery Ajax 微调器未在 IE7 中显示
【发布时间】：2011-01-21 12:38:19
【问题描述】：

我试图在加载 AJAX 内容时显示一个 ajax 微调器。

以下代码在 Firefox 中似乎可以正常工作，但在 IE7 中却不行。正在调用显示和隐藏微调器的函数，但浏览器不显示它。

这里是 jQuery：

        $.ajax({ 
            url: filterorSearch,
            data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
            beforeSend: function(){
                showLoadingGraphic();
            },
            complete: function(){
                hideLoadingGraphic();
            },
            success: function(data){
                $("#BreakingNews").html(data);
                GetRelatedarticles();                
            }
        });

    function showLoadingGraphic() {
        alert("show");
        var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
        return showSpinner;
    }

    function hideLoadingGraphic() {
        alert("hide");
        var hideSpinner = $('#ajaxLoader').remove();
        return hideSpinner;
    }

以及与微调器相关的 CSS：

#page-placeholder-wrapper #main-left 
{
    position:relative;
    }

#ajaxLoader 
{
    background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:9999;
    }

【问题讨论】：

标签： ajax jquery spinner

【解决方案1】：

为了让你工作，试试这个：

    background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);

我不知道为什么 rgba 必须放在最后！

[编辑]

IE 不支持 rgba，因此从 background: 开始会出错，并且不会为 css 执行该行的其余部分

见：Browser Support for RGBa

【讨论】：

谢谢，我会在星期一试一试。

【解决方案2】：

JQuery 在执行 ajax 时实际上会触发事件。

$(document).ajaxStart(function(){
    $('#ajaxIndicator').show();
 }).ajaxStop(function(){
    $('#ajaxIndicator').hide();
 });

与为每个单独的呼叫手动执行相比，这将为您节省大量时间。

您可以有一个相对于文档顶部的 DIV，您可以显示/隐藏它覆盖页面上的所有其他内容。（我忘记了确切的 CSS 使它总是距离屏幕顶部 200 像素等）更新：我认为它的位置：固定，虽然我不确定这在 IE 中的效果如何。

  <body>
    <div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
        <img src="../indicator.gif" /> Loading ...
    </div>

    ...

【讨论】：

这也不起作用。我很欣赏您的意见，但我认为代码中的其他地方一定有问题。

【解决方案3】：

可能是您的 DOM 元素的 Z 排序问题；

IE 以与其他浏览器不同的方式处理对象的 Z 排序。尝试在您的包装元素上设置 z-index ，它应该会有所帮助。一般来说，如果您想省去使用相对定位或绝对定位定位的元素的麻烦，总是为它们的父级提供正确的 z-index；

让实际的页面进行调试会更容易。

【讨论】：

恐怕不是这样。我正在本地为客户工作，因此发布页面不是一种选择。很好，感谢您的意见:)
当我在 show 函数中检查它的长度时，它看起来没有执行前置操作，它返回为 0。
hmm，胡乱猜测 - 尝试将 zoom:1 添加到包装元素以触发其上的 hasLayout - 可能是这样 - 或者在 DOM 树的更高位置缺少 hasLayout
您是否 100% 认为 beforeSend 在 ie 中被触发？它会触发警报吗？以为是渲染问题，但如果你说它根本没有添加元素，那一定是别的东西
只是为了确认 - 最新版本的 jQuery？ IE7 中没有一个错误？

【解决方案4】：

为了我的理智并在今天完成这项工作。

我已将“ajaxLoader”元素添加到标记中，最初使用 CSS 隐藏，然后在 AJAX 启动/停止时显示/隐藏。

这适用于所有浏览器。

感谢大家的意见。

【讨论】：