Question

我正在尝试在用户等待对服务器的调用时显示加载动画。为此，我尝试使用JQuery显示div，但它仅适用于Firefox（不适用于IE或Chrome）。

现在，BigSlowFuncCall只有一个c＃System.Threading.Thread.Sleep(10000);

JAVASCRIPT

function showloading() {
  $('#content').hide();
  $('#siteLoader').show();
}

function hideloading() {
  $('#content').show();
  $('#siteLoader').hide();
}

function CheckFields() {
   showloading();

   var jsHandler = new JsonHandler();
   jsHandler.BigSlowFuncCall();

   hideloading();
}

HTML

<div id="wrapper">
    <div id="siteLoader" style="display:none;" > 
        <div id='siteDetailLoader'> 
            <img src='img/loading.gif' border='0' alt='cargando'> 
            Por favor, espera<br /> <br /> 
        </div>
    </div> 

    <div id="content">
        <form>
          <p>
              /* Stuff */
          </p>
          <p class="submit"><input type="button" id="btn" onclick="CheckFields()" class="button-link" value="Descargar"/></p>    
        </form>
</div><!-- #content-->

</div><!-- #wrapper -->

这在Firefox上可以正常工作（隐藏内容，显示加载动画，10秒后隐藏加载动画）但在IE中它只显示我退出hideloading()函数并且只有在它退出CheckFields函数后才会显示

这么简单的代码如何才能在Firefox上正常工作，而不是在IE上工作？

编辑：我看到如果我在alert()后放showloading()它完美无缺。所以，我搜索并找到了这个：Forcing a DOM refresh in Internet explorer after javascript dom manipulation。我尝试了这个https://stackoverflow.com/a/4271996/1824011，但它也没有用。

Answer 1

可能会帮助你;

function checkFileds()
{
    var overlay = jQuery('<div id="overlay" align="center"><img src="images/preloader_bajaj.gif" width="125" height="125"  style="margin-top:300px" /> </div>');
    overlay.appendTo(document.body)

.......your code.......

}

Answer 2

你错过了什么吗？隐藏功能中的$符号丢失。 IE在这种类型的错误中非常敏感。纠正代码并尝试。

在IE中等待服务器端代码时加载动画

2 个答案: