jQuery Ajax 微调器未在 IE7 中显示
Posted
技术标签:
【中文标题】jQuery Ajax 微调器未在 IE7 中显示【英文标题】：jQuery Ajax spinner not displaying in 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;
【问题讨论】：
【参考方案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 启动/停止时显示/隐藏。
这适用于所有浏览器。
感谢大家的意见。
【讨论】：
以上是关于jQuery Ajax 微调器未在 IE7 中显示的主要内容，如果未能解决你的问题，请参考以下文章
在 jQuery Mobile 中的 Ajax 调用中显示页面加载微调器
使用跟踪代码管理器未在 Analytics 中显示增强型电子商务数据