Question

我正在尝试在加载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;
    }

Answer 1

可能存在对DOM元素进行Z排序的问题;

IE以与其他浏览器不同的方式处理对象的Z排序。尝试在你的包装元素上设置z-index，它应该有所帮助。一般来说，这是一个最佳实践，如果你想通过相关或绝对定位的元素来节省你的麻烦，总是给他们的父母正确的z指数;

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

Answer 2

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

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

这将为您节省大量时间，而不是为每次通话手动执行此操作。

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

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

    ...

Answer 3

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

    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

Answer 4

为了我的理智，今天就完成了这件事。

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

这适用于所有浏览器。

感谢所有人的投入。

jQuery Ajax微调器不在IE7中显示

4 个答案: