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

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 上却不行？

编辑:我看到，如果我在 showloading() 之后放置一个 alert()，它就可以完美运行。所以，我搜索并找到了这个: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.......

}