在IE7中不显示jQuery Ajax微调器

我想在加载AJAX内容时显示ajax微调器。在IE7中不显示jQuery 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; 
    }

来源

2011-01-21 RyanP13

为了让您的工作试试这个：

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

我不知道为什么RGBA必须是最后一个！

[编辑]

IE不与它开始于background:它错误和该行的其余部分被不为CSS

见执行支持RGBA，因此：Browser Support for RGBa

来源

2011-01-21 21:20:35 Gutzofter

可能是您的DOM元素的ž排序问题;

IE以不同于其他浏览器的方式处理对象的Z排序。尝试在你的包装元素上设置z-index，它应该有所帮助。一般来说，如果您想用相对或绝对定位来定位元素来为您节省麻烦，那么最好的做法是始终向父母提供适当的z-index;

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

来源

2011-01-21 12:47:39

那不是我害怕的。我正在为客户端工作localy，因此发布该页面不是一种选择。这将是很好的，并欣赏输入:) – RyanP13 2011-01-21 13:00:00

它看起来像你IE浏览器不执行前置时，我检查它的显示功能它的长度它回来0。 – RyanP13 2011-01-21 13:03:53

嗯，疯狂的猜测 - 尝试添加缩放：1的包装元素触发hasLayout - 可能是这样 - 或丢失hasLayout在DOM树的某处更高 – 2011-01-21 13:05:33

JQuery实际上会在事件发生时触发事件。

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

这将为您节省大量的时间，为每次单独调用手动执行此操作。

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

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

    ...

来源

2011-01-21 13:10:45 Derrick

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

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

这适用于所有浏览器。

感谢所有的投入。

来源

2011-01-21 13:37:17 RyanP13

在IE7中不显示jQuery Ajax微调器

回答

相关问题