Question

我试图有条件地显示图像 - 但它不能仅在IE浏览器中工作。在Firefox中，它正常工作。还有其他任何选择吗？谢谢。

<span id="goog" style="display:none;" >
    <img height="14" width="14" src="static/images/ajax_load.gif" />
</span>

if(document.getElementById("goog")){
    alert('goog');
    document.getElementById("goog").style.display="none";
}

if(document.getElementById("goog")){
    alert('goog');
    document.getElementById("goog").style.display="inline";
}

更新：03/07

我一直试图为IE解决这个问题，但我还是做不到。

问题：我正在使用来自dtree的自定义javascript树组件，并填充在树中单击的每个节点的数据或子项，我正在使用Ajax。每次，如果正在处理某些内容，我想显示ajax图像（gif）以及“处理”文本。我试过的所有内容都适用于Firefox，但不适用于IE。每个节点都是HTML文档中的div标签，如下所示：

<div class="dTreeNode">
<a href="javascript: d.o(1);">
    <img id="jd1" alt="" src="static/images/minusbottom.gif"/>
</a>
0
<input id="ch1" type="checkbox" onclick="javascript: changeCheckBoxValues(1);"/>
<a id="linkNode1" class="node" onclick="javascript: d.o(1); return false" href="#">AIG</a>
<span id="aj1" style="display: none;">
    <img height="14" width="14" src="static/images/ajax_load.gif"/>
</span>

当触发Ajax请求时，会显示静态且以前未显示的（显示：无），如下所示

<table  align="center"  width="80%" border="1" cellspacing="0" cellpadding="0" id="proc"
        style="display:none;border-collapse: collapse; border: 1px solid; border-color: #D8D8D8;">
        <tr>
            <td width="33%"></td>
            <td class="buttonBar" width="33%">
                <span class="TextBlackNormal">&nbsp;&nbsp;&nbsp;&nbsp;processing </span>
            </td>
            <td width="33%"></td>
        </tr>
</table>

两个锚标签都会触发Ajax请求，但显示（GIF图像和处理文本）不仅在IE中有效。

我尝试了以下内容：

1）互换了href＆amp;在DIV中锚点标记的onclick值 2）尝试使用DOM的可见性值而不是显示 3）创建动态DOM元素并添加图像+文本 4）容器（div / table）的innerHTML，其中显示了ajax加载图像+处理文本

我已经发现导致这个问题的不是Ajax调用，至少我是这么认为的。

当我进行实验时，使用IE中的显示/可见性条件显示图像+文本，带有一些DOM值（文本框的值），它就像一个魅力。

我真的不确定导致这个问题的原因。

感谢任何帮助。

Answer 1

我觉得这个问题有点难以理解。但这里最大的问题是你正在使用的IE版本。较旧版本的IE，在隐藏/显示元素时会出现一些渲染问题。要使用position: relative和zoom: 1来纠正这个问题。

但是脚本应该可以工作，但是你的AJAX调用可能会出错，这会阻止你调用你的成功函数。尝试添加错误事件，看看是否会触发。我不太确定你从服务器上收到了什么，但IE有时可能会在被阻止的元素上失败。

但是jsfiddle的展示会很好。

Answer 2

IE中的

document.getElementById实际上可以返回name="goog"的元素。此外，如果页面上有多个具有此类ID的元素，则这是不正确的，并且在这种情况下，不同的浏览器可能表现不同。在IE中执行类似的检查：

alert(document.getElementById("goog").id);
alert(document.getElementById("goog").tagName);

Answer 3

你可以尝试“内联”更改“” 或访问http://jsfiddle.net/xTUZd/2/

Answer 4

从下面引用的文字

问题：我正在使用来自dtree的自定义javascript树组件，并填充在树中单击的每个节点的数据或子项，我正在使用Ajax。每次，如果正在处理某些内容，我想显示ajax图像（gif）以及“处理”文本。我试过的所有内容都适用于Firefox，但不适用于IE。每个节点都是HTML文档中的div标签，如下所示：

我想你想要显示处理文本，直到通过ajax调用获取原始数据。

如果是这样，那么你可以通过检查ajax状态来显示图像，

在每行中都有一个div（可能在水平锚文本旁边），你想要显示处理文本。

在ajax回调函数上，

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
  else
  {
     document.getElementById("goog").innerHTML ='<img src=static/images/ajax_load.gif>';
  }
}

我认为这对你来说已经足够了吗？如果我误解了你的问题，我很抱歉。

IE7 Ajax加载图像问题 - css属性显示不起作用

4 个答案: